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


Show Code

<a href="#code" class="revealToggle infoButton" data-transition="slide" data-toggleText="Hide Code">Show Code</a>
<div id="code">
	<pre class="html">
		<!-- Code would go here -->

VM UI Framework is created, owned, maintained by Virtuosi Media, Inc. © 2012-2013.