The Reveal plugin can toggle the visibility of a selected section of the page, with an optional transition effect. The plugin is progressively-enhanced, so any hidden content will be visible if JavaScript is not enabled.
Use any a element to act as your toggler. Give it a class of revealToggle
and set the href attribute equal to the id of the element you wish to toggle. You can
use the options as you need them.
The following options are all optional and can be added via data-attributes to the reveal toggle element.
| Option | Description | Default | Values |
|---|---|---|---|
data-transition |
The type of transition to display the hidden content. | none | none, slide |
data-startState |
The initial state of the content. | closed | closed, open |
data-toggleText |
A string of text to replace in the toggle element. If this option is not set, the text will not be changed. | none | any string |
<a href="#code" class="revealToggle infoButton" data-transition="slide" data-toggleText="Hide Code">Show Code</a> <div id="code"> <h6>Code</h6> <pre class="html"> <!-- Code would go here --> </pre> </div>
VM UI Framework is created, owned, maintained by Virtuosi Media, Inc. © 2012-2013.