| Table of Contents |
|---|
About the Accordion
The Accordion Web Part 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 Web Part 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 Web Part 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 web parts.
Please select either a section or a template to add within the new section.
Hover over the top area of the section until a gray line and plus symbol show and then click on it
Search for and select the Accordion by Social Edge web part
Click in the section and click on the pencil icon
A menu will open on the right-hand side, please click open config panel.
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 FAQSurveys) as well as an item description (All related FAQslink URL (http://google.com ). 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 default theme from your site. Otherwise, please leave that box unchecked to set a custom theme at the web part level.
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 athttp://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
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 - when checked, you can create a link from another page to open up a section of the accordion by assing “?accordionSection={number}” to the URL. If the number is {1}, the first section of the accordion will open when that link is accessed.
Configure Fonts
Select Fonts from the web part 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 web part 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 web part - add it to the page and click to edit the web part. Once you are editing the web part - 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 all within the web
aprt configuration.
In the top right corner of your page you will then click publish (if your page has not been published yet) or you will click republish (if your page has already been published and you are making changes and want to republish).
Support
Need support or want to talk to us? Please send an email to: