HTML: Element Toggler

An element Toggler is another way to condense information to avoid a text-heavy content page.

 

Example

Toggler

  • item 1
  • item 2

 

Anatomy of the Code Snippet

 Toggler.png

  

How to Add an Element Toggler

1. Copy the code snippet:

<p><span class="element_toggler" role="button" aria-controls="group_1" aria-label="Toggler toggle list visibility" aria-expanded="true"> <i class="icon-mini-arrow-down"></i> Toggler </span></p>
<ul id="group_1">
<li>item 1</li>
<li>item 2</li>
</ul>

 

2. Navigate to a content page, click Edit, and select HTML Editor.

3. Paste the code snippet and change your menu title and list items.

4. Preview in Rich Content Editor (Note: It will not toggle yet).

Back to HTML Homepage