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.
Usage
Creating toggles within your articles is easy:
- 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="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.
- The first toggles
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.
- The second toggles
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.
- The third toggles
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.
Comments
0 comments
Please sign in to leave a comment.