Common Styles - Toggles

Toggles

Uses

Typically we use toggles to initially hide content that is relevant to the page, but may be overwhelming to a user scanning for the content he wants. A long page with large blocks of text separated into several h2 or h3 sections can be a good candidate for the toggle. Navigational items are also good uses such as our left nav accordions.

Standard Block Toggle

<a> <span class="togglebutton toggle_show"> This text will be clickable to show/hide the hidden content. </span> </a> <div class="toggle"> <p>This is the content that will be initially hidden and then shown when the above span is clicked.</p> </div> 
This text will be clickable to show/hide the hidden content.

This is the content that will be initially hidden and then shown when the above span is clicked.

Top