Accordion Tile Configuration Version 3.1

Owned by Ruth Neighbors
Last updated: Jul 30, 2023
6 min read

New Version: 3.1

What’s new?

Version 3.1 – has two enhancements
1. The ability to have the tile default to all sections expanded.

2. The ability to set up the accordion sections to have multiple sections open by the user instead of having one section open at a time. (In other words, multi-section instead of single-section expansion)

Version 3.0 includes the ability to upgrade to a new version of the icons (from Font Awesome), adjusting heights of headers, enable a link to a specific accordion section that can be used in a call to action button, as well as some changes to names of the sections to match the configuration settings in our other tiles. For Version 2, go to the original guidehttps://socialedgeconsulting.atlassian.net/wiki/spaces/TFJ/pages/17236093

Before You Start

If you plan to use your own images to the Accordion Tile you may want to upload those to your community before you get started. 

 

 

  1. To add custom icon images for the tile, click the gear icon in the upper right corner of the place you are working.

  2. Click Static resources or Image Files (depending on your Jive version)

  3. Click Upload a File and select the image(s) you want to use in the accordion. When using a custom icon, we suggest uploading a 40x40px icon. If your icon is a bit larger, don't worry; it will be resized.

  4. You will need image URLs generated by Jive to add custom icon images to the accordion tile. Once you upload all images, copy the URL to your clipboard and then paste into the custom icon URL field in the slide’s configuration view.

Configuring the Accordion Tile

https://socialedgeconsulting.atlassian.net/wiki/spaces/TFJ/pages/491522

  1. To access the tile’s configuration panel for editing in the future, click the gear icon in the upper right corner of the tile. 

     

  2. You are now ready to configure the tile.

Configuring the Sections

  1. To display the tile’s configuration panel, click the gear icon in the upper right corner of the tile.

  2. You are now ready to configure the appearance of the tile, Select Setup in the configuration panel and click on New Section.  

    • You must configure some aspect of the Tile's appearance and save your work before adding it to a page.
      In Version 3.1 (shown below), there’s now an option to adjust the section behavior between a Single Active section (meaning one section will open at a time), versus a Multi-Active section. In the latter, the user will be able to open all the sections and close any section of the accordion without the rest of the sections closing.

    • Once you’ve clicked on New Section, the below options will appear.

 

  1. Enter text for the Section title. This text is the large headline for a section or band of the accordion. For example, Employee Forms or Discounts.

  2. Select either a Font Awesome5 or Custom icon. This icon will display with the Section title. 

    • Type a descriptive term to choose the Font Awesome5 icon you would like to use. For example, form or Facebook. You can learn more about Preset icons by clicking on the Icon guide below the drop down menu. 

    • You will also see a preview of the icon chosen 

    • If you are using a Custom icon enter the URL for the custom icon’s image (see step 4 in “Before You Start”).

    • If you’re editing an existing tile, you can change from Font Awesome4 to Font Awesome5 in the Advanced Settings.

  3. Next, add Section items to display links under each accordion section or band.


 

  1. Select Add Item and enter the Item title you want to display under the item’s icon. For example, New Hire Forms or Movie Tickets.

  2. Enter the Action URL for the Section item. This URL will direct the user to a specific place, topic, document, etc. in Jive or outside the community when clicking on the Section item’s icon. 

  3. Select whether or not you want the link to open in a new window.

  4. Select the icon. This icon will display with the Section item (see step 4 above for details). 

  5. Enter the desired hexadecimal code for the Icon color. If you don’t know the hexadecimal value, convert your colors at http://rgb.to

  6. When you finish all Section item entries for a slide, select Save Section.

As needed, Select New Section and repeat the steps above for each accordion section or band required for your user experience.

Quick tip once you’ve set up a few sections of your accordion tile.

  • Set the default section to be expanded by default when a user visits the page. Or, you may set all of them to open by default or all can be closed.  

  • The drop down menu will display the sections you have already configured or select None to have all collapsed by default.

Save All now before moving on to the next section. Scroll to the bottom of the tile and click the Save All button.

Note: You are not required to save after editing each section; however, we recommend you do to avoid accidentally closing the configuration panel without saving. You can click Cancel to cancel all your changes and leave the configuration panel.

 

Configuring the Theme

  1. Select Theme to open the configuration options.

  2. Enter the hexadecimal code for the Section item text color. This text color applies to the Section item titles in the tile. 

  3. Enter the hexadecimal code for the Band background color for the Odd bands in the accordion. For example, the first and third sections in the accordion. 

  4. Enter the hexadecimal code for the Text color for the Odd bands in the accordion. 

  5. Enter the hexadecimal code for the Icon color for the Odd bands in the accordion.

     

  6. As needed, repeat Steps 3 through 5 for the Even bands or sections of the tile.

  7. Save All now before moving on to the next section. Scroll to the bottom of the tile and click the Save All button.

 

Note: As you enter various hexadecimal codes for these elements a color preview is generated for you.

Configure the Advanced Settings

 

  1. Set the Header band height. Adjust the band height if needed to accommodate font/image sizes.

  2. Convert your tile from using FontAwesome 4 to FontAwesome 5 by using the drop down menu here.

  3. Customize Margins. Set extra padding between the Mosaic and other tiles if desired.

  4. Allowing linking to specific accordion section. When checked, you can create a link from another page to open up a section of the accordion by adding “?accordionSection={number}” to the URL. If the number is {1}, the first section of the accordion will open when that link is accessed.

    For example: https://company.jiveon.com/community/getting-started?accordionSection=1

Configure Fonts

General instructions are listed in the above guide. For this tile, you can configure fonts for the Section Label, Description and Caption.

 

Configure Google Analytics

Adding Custom HTML