Filter Accordion Widget

The Filter Accordion Widget extends on the accordion widget with the use of filters. The already compartmentalized accordion items can be further categorized and sorted using the filter bar above it. 

DEMO


Title : Enter the title for your widget

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.

Show all Text : Display link to show all items

Label for showing all Toggles : This will be the first item in the filter list and will be active when the page loads.


Filters

This is a repeater section to enter all the filters you want.

Filter : This is the text that will appear in the front end. They will appear in the order you have entered them, so rearrange if necessary.

Slug : Should be unique. Should not contain spaces.

For example: if your filter is  WordPress FAQ. you can input the slug as wordpress-faq or wp-faq.


Toggles

This is also a repeater section and is where you define the accordion.

Title : This will appear on the toggle head.

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

Slugs : Enter the slugs from above for which the toggle should be visible. If you want to input multiple slugs, just leave a space between them.

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


Styling

Filter List Theme : These options will display the filter list with different styles.

Filter List Color : The color will typically be used for the text. Will vary by theme chosen.

Filter List Highlight Color : The color will typically be used for the background. Will vary by theme chosen.

Filter List Position : You can have the filters on the left, center or right.

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.