Accordion Widget

The Accordion widget allows you to compartmentalize information and improve user experience on your site. Logically very similar to the tabs widget, the accordion stacks items in a vertical list. This widget also doubles up as a toggle widget by checking the option to open multiple toggles at once.

DEMO


Admin Label : The name you add here will appear in the page builder under the widget name. This helps with easy identification of the contents of the widget.


Settings

ID :  This is an optional field. Should be unique on the page. Must begin with alphabets[A-Za-z]. Should not contain spaces. Does not appear on the front-end.  For simplicity, you can give the id’s values such as acc-1, acc-2 etc. You can also give it a more meaningful id.

Note : This is useful to deeplink toggles. Suppose you have an accordion with id  toggles then you can use a link your-url/#toggles-3 to open the third link.

Multiple Toggles : Checking this option will let users have more than one toggle open simultaneously.

Minimum 1 toggle : Checking this option will keep at least one toggle open. In other words, all toggles cannot be closed at the same time.

Closed Toggle Icon : This will add an icon to the toggles when it is closed. This is an optional field.

Open Toggle Icon : This will add an icon to the toggles when it is open. This is an optional field.


Toggles

This is a repeater field. You can add as many as you like.

Title : This will appear on the toggle head.

Open by default : Checking this option will keep the toggle open on page load.

Content : You can use the editor to add the toggle’s content.


Styling

Icon Location : You can choose to place the icon on the left or the right of the title. Works only when icons have been selected above.

Text Alignment : This applies to the toggle title. You can align it left, center or right.

Gap between toggles : Checking this option will leave a small gap between the toggles.

Title Background Color : Sets the color of the title background. Leave blank for transparent.

Title Background Hover Color : Sets the color of the title background on mouse hover. Leave blank for transparent.

Title Color : Sets the color of the title. Leave blank for transparent.

Title Hover Color : Sets the color of the title on mouse hover. Leave blank for transparent.

Icon Open Color : Sets the color of the icon when the toggle is open. Defaults to #333333.

Icon Close Color : Sets the color of the icon when the toggle is closed. Defaults to #333333.

Content Background Color : Sets the color of the content background. Leave blank for transparent.