Togglable

Togglable is a lightweight jQuery plugin that makes it simple to toggle displaying each of the set of matched elements..

Demo

» toggle all  |  » show all
» show block #0.
» show block #1.
» show block #3.

Quick Start

Starting with Togglable is really easy!

Setup:

Include the script and stylesheets in your document (you will need to make sure the css and js file are on your server, and adjust the paths in the script and link tag)

<link href="jquery.togglable.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery.togglable.js"></script>

Javascript:

$('a.togglable').togglable();

HTML:


<p>
  <!-- Set the rel attribute to "toggleall" to toggle displaying all elements -->
  <a href="#" rel="toggleall" class="togglable">toggle all</a>

  <!-- Set the rel attribute to "showall" to expand/collapse all elements -->
  <a href="#" rel="showall" class="togglable">show all</a>

  <!-- These values, "showall" and "toggleall", are editable in options. -->
</p>

<div>
  <p>
    <a href="#id_of_block1" class="togglable">show</a> block #1.
  </p>
  <div id="id_of_block1" style="display:none;">
    block #1.
  </div>
 
  <!-- Use the rel attribute to specify the label.-->
  <p>
    <a href="#id_of_block2" rel="hide block #2" class="togglable">show block #2</a>.
  </p>
  <div id="id_of_block2" style="display:none;">
    block #2.
  </div>
  
  <p>
    <a href="#id_of_block3" class="togglable">show</a> block #3.
  </p>
  <div id="id_of_block3" style="display:none;">
    block #3.
  </div>
</div>

Options:

easing string null The name of the easing effect.
jQuery Easing Plugin is required.
effect string 'sliding' 'basic', 'sliding', or 'fading'.
See documentation.
hideAll string 'hideall'
hideAllLabel string 'hide all'
hideLabel string 'hide'
showAll string 'showall'
showAllLabel string 'show all'
showLabel string 'show'
speed string/integer 'normal' A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
toggleAll string 'toggleall'