How to Configure the Accordion Widget
- Sara Collins
- Dori Gray
About the Accordion
The Accordion Widget displays visual icons and text in a clean accordion-styled layout. Configure multiple sections all of which can contain and house multiple items. The Accordion Widget has different style options and customizable features to best match your community’s visual identity and brand.
Key features:
Easily display multiple sections within an accordion
Offers easy-to-configure styling for each accordion
Supported in all types of views
Setup and Configuration
Add the Accordion Widget to a Page
In the top right of your page click on edit
Click the plus button where you would like to add another section where you can add more rows.
Search for and select the Accordion by Social Edge widget and click add
A panel will appear on the left-hand side - click settings
A menu will open
Configure the Accordion
Configuring the Setup
Add as many sections as desired. Each section supports a section label, section description, and icon. Within each section, you can add items. Please see the image below for an item configuration. Please see the image below for an example of a configured accordion.
Add linked items within a section - the item configuration supports an item title (Customer FAQ) as well as a field to enter the action URL (where the user is directed once they click on it). An item also supports the selection of an icon (either from Font awesome or from a custom-uploaded icon). Please see the image below for an example of a configured accordion.
You are not required to save after editing each section, but 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.
Configure the Theme
Color Theme Configuration Menu
Enable the checkbox at the top if you would like to use the system theme from your site. Otherwise, please leave that box unchecked to set a custom theme at the widget level.
Enable the checkbox at the top if you would like to use a simple list (small icon followed by single line of text) rather than the default icon/text styling. Simple list is recommended when using the Accordion in a narrow tile.
Set Section Item Text Color
Enter a text color for section items within the accordion.
Note: If you don’t know the hexadecimal value, convert your colors at http://rgb.to
Set The Odd Bands Styling - set the themes for the odd-numbered accordion items.
Band Background
Header Text Color
Icon Color
Description Text Color
Set The Even Bands Styling - set the theme for the even-numbered accordion items.
Band Background
Header Text Color
Icon Color
Description Text Color
Simple Theme Example
Configure the Advanced Settings
Advanced Settings Configuration Menu
Set your header band height. This is how tall you would like each header band to be.
Enable/ disable the option to allow links to the accordion section
Configure Fonts
Select Fonts from the widget menu.
Select a Font method from the below options for the following accordion components:
Component
Section Label
Section Description
Item Caption
Font selection
Basic Font: Choose from the browser default fonts (serif, sans-serif, cursive, and monotype) and global web-safe fonts used in your SharePoint community. If you select a Basic font, you can also configure the script type (Bold, Italic, etc.).
Google Font: you can select a font from those provided by Google. Begin typing to search for a specific Google font. Browse and preview the Google Fonts database here: Google Fonts.
Custom Font: you can import your own custom font by supplying hosted links to your font files. For cross-browser compatibility, please specify at least a woff or ttf font file.
Note: You are responsible for licensing and paying for that font
Migrate Configuration
To copy an already configured Accordion widget and paste it onto another page (to avoid having to reconfigure) - please click on the migrate configuration tab and click on copy to clip board under the copy current config.
To paste in your Accordion code - navigate to a new page where you would like to add a new Accordion Widget - add it to the page and click to edit the Widget. Once you are editing the Widget - enter your code within the add new config tab and click apply.
Publish the Page
When you are done making all changes scroll down and click save within the widget configuration.
In the top left corner of your page you will then click the check mark to publish (if your page has not been published yet)
Support
Need support or want to talk to us? Please send an email to: