en en en en en de en en en en en en en en en en en en en en la en la en la la en en en en en en en en en en pl en en en en en en en en en es en en
Making content easy to find with toggles and accordions – Leopold
Back to website Community Submit a request Sign in
Enhancing content with interactive elements
January 22, 2022 05:00
Toggles and accordions are a common element in web design. They allow for progressive disclosure — the ability to highlight important sections of content and allow visitors to reveal additional details with a click.
Accordions look and behave exactly like toggles except for the fact that only one within a given section can be open at a time.
Creating toggles within your articles is easy:
When editing an existing article, create a list (  or   element) and click the Source Code ( ) button on the editor toolbar to view the source code of the page.
Add the data-element="togggles" attribute to the list element.
Add optional tab titles to each list item using the data-title attribute.
To have the group of toggles behave as an accordion, use the data-accordion="true" attribute.
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.
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.
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.
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.       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.       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.
Using tabs to organize content
Was this article helpful?
0 out of 0 found this helpful
Please sign in to leave a comment.
Articles in this section
Using tabs to organize content
Making content easy to find with toggles and accordions
Back to website Terms Privacy Zendesk Theme by Zenplates