Creating toggles within your article content doesn’t involve copying and pasting any HTML as the Tabs extension lets you transform standard ordered (
<ol>) and unordered (
<ul>) lists created in the article editor into interactive collapsible and expandable sections. This makes it easy for visitors to find what they’re looking and allows content creators to focus on producing helpful content.
If you do ever need to migrate your content you can do so without having to worry about unnecessary markup or inline styles.
The default template is simple, elegant and responsive and will automatically inherit the overall style of your theme. You can add any type of content you like to each collapsible section, including HTML, images, videos and other article formatting styles.
Using the options described on the Usage tab you can have the toggles behave an an accordion, where only one toggle can be expanded at a time, and create custom templates. Custom templates can be used to change completely change the look-and-feel of the toggles, add new elements like icons and even modify the behavior of the toggles themselves.
Toggles can be used anywhere in the help center, but often they are used within article content. Our extension allows you to create toggles in several different ways, none of which require you to copy-and-paste any HTML.
The Toggles extension is bundled into all of our themes by default, so you can start using it straight away. The source code can be found within the
extensions.(min.)js file in the theme’s Assets folder.
|initial|| || ||The index of the toggle to open on initialization.|
|accordion|| || ||True if the toggle group should behave as an accordion.|
|activeClass|| || ||The class name(s) to apply to an active toggle heading.|
|template|| || ||The name of the template to use.|
|templateData|| || ||Additional data to provide to the template rendering function.|
| ||Fires when the toggles markup has been rendered and inserted into the DOM.|