Collapsible toggles and accordions can be used to make your article content easier to navigate and read. They help minimize scrolling and, when used properly, allow visitors to find content that’s relevant to them quickly and easily.
It’s important to consider what the best approach for structuring your article content is. For example, if the page is long but visitors need most or all of the content on the page a navigation element like a Table of Contents or sidebar menu may be more appropriate.
Adding toggles to article content
The first step is to create a numbered or bulleted list in your article where each list item contains the content that will be contained within its own collapsible toggle section. If you have a lot of content to display in each toggle, or content that contains headings and other custom elements, we recommend using the Source Code view within the article editor.
The list itself will be a <ol> or <ul> element, with child list items represented as <li> elements.
Once you’ve added all of your content to the list add a class name of js-toggles to the list and a data-title attribute to each list item. For example:
<ulclass="js-toggles"><lititle="The first toggle title">...</li><lititle="The second toggle title">...</li><lititle="The third toggle title">...</li></ul>
Where:
The .js-toggles class name specifies that we’d like to convert this list into dynamic toggles.
The title attribute specifies the title for each toggle.
The content of each list item is converted into its own collapsible toggle section.
An example of the default toggles style as well as an alternative method for specifying toggle titles can be found on the Toggles extension page.
This approach ensures a separation between your content and how it’s displayed to visitors. If you ever decide to switch off toggles for a given list, change themes or export your content you’ll see a simple, uncontaminated list.
Enabling accordion functionality
Enabling the accordion option in the Toggles extension ensures that only one toggle within a group is open at a time. If one is already open, expanding another will cause it to close.
The easiest way to enable this option is using the data-accordion="true" attribute:
If you’d like to give your toggles their own unique look-and-feel there are a couple of options. You can write your own custom CSS, for example:
/* Change the color of a toggle title to red */.content.toggle-title{color:red;}/* Change the color of text in a collapsible toggle section to blue */.content.toggle-title~.collapse{color:blue;}
Using a custom micro-template
Or for the more adventurous among you, you can create your own custom micro-template.
A custom template allows to to change not just the appearance of the toggles, but their underlying HTML structure and behavior. Below is an example of a custom toggles template that you could use to change the size and appearance of the toggles:
Large, custom toggles with icons
Additional features like custom icons can be included in a custom micro-template.
The Toggles extension looks for a micro-template with an id of toggles by default, so adding one to Article page template (article_page.hbs) or the globally available Footer template (footer.hbs) will ensure that it’s used for all toggles within your article content.
<ulclass="js-toggles"><lititle="The first toggle title">...</li><lititle="The second toggle title">...</li><lititle="The third toggle title">...</li></ul><templateid="tmpl-toggles">
...
</template>
Questions or feedback about this article? Let us know
Verify purchase
Provide details about your purchase to unlock this and other code examples throughout the website.