In this article
The Toggles plugin generates interactive, toggleable sections from static lists. Each example on this page can be made to behave like an accordion using the accordion option of the Toggles plugin.
Standard template
The following examples use the default template.
-
-
<ul data-element="toggles" data-active-class="text-primary"> <li data-title="The first toggle title"> <p>Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis.</p> </li> <li data-title="The second toggle title"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </li> <li data-title="The third toggle title"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue justo a metus bibendum dapibus. In imperdiet interdum tincidunt. Nam odio dolor, hendrerit vel eros non, viverra pellentesque tellus. Proin ac elit in leo faucibus gravida. Donec ut neque non augue porttitor mollis a quis eros.</p> </li> </ul>
Use data-accordion="true" to have the toggle group act as an accordion.
Custom templates
Custom templates provide complete control over the look-and-feel and behavior of the toggles.
Using the collapse.show and collapse.hide events, you can update elements of the default template when toggles expand or collapse.