Transform static lists into interactive, toggleable sections.
The Collapse plugin, which can be used independently of this plugin, is responsible for collapsing and expanding toggle sections.
Via data attributes
When editing an existing article, create a list (<ul> or <ol> element) and click the Source Code ( < > ) button on the editor toolbar to view the source code of the page. Add the data-element="toggles" attribute to the list and optional titles to each list item using the data-title attribute:
<uldata-element="toggles"><lidata-title="The first toggle title">...</li><lidata-title="The second toggle title">...</li><lidata-title="The third toggle title">...</li></ul>
The following example uses the default template, which can replaced using the plugin’s template setting.
Alternatively you can copy-and-paste your custom toggle HTML markup onto any page, eliminating the need to use the Toggles plugin.
The duration of the transition is defined in CSS, which can be modified by applying transition duration utilities the parent element. For example, use .transition-fast to increase the speed of each collapse and expand transition.
Toggle groups can be configured to behave as accordions using the accordion setting.