"Expand" Button

"Expand" buttons reveal hidden text when clicked and are a great way to fix a text-heavy page without losing information you want to make available.

 

Example 

 

Anatomy of Code Snippet

_div style=_background-color_ #ebedee; padding_ 20px 20px 20px 20px; overflow_ hidden;__Your Text Here__div_ (18).png  

 

How to Add an "Expand" Button

1. Copy the code snippet:

<p>

<span class="element_toggler btn btn-primary" role="button" aria-controls="instructions" aria-label="Toggler toggle list visibility" aria-expanded="false">Button text</span>

</p>

<ul id="instructions" style="list-style: none; display: none;">

<li>

<p>Enter expanded text here.</p>

</li>

</ul>

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

3. Paste the copied snippet & edit the text that will show on the button and in the expanded text. You will see your button once you save your content page.

 

Tip: See the "Buttons" page for customization options.