GroupToggler documentation

GroupToggler toggles the visibility of all elements with a specified CSS class when a link is activated. This can be used to show or hide multiple elements on a page.

Example

To toggle the visibility of odd numbers click this link or or

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
<p><a class="grouptoggler targetClass-odd" href="#">Click this link</a> or <label>Select this checkbox <input type="checkbox" class="grouptoggler targetClass-odd" /></label> or <input type="button" class="grouptoggler targetClass-odd" value="click this button" /></p>
<ul>
	<li class="odd">Item 1</li>
	<li class="even">Item 2</li>
	<li class="odd">Item 3</li>
	<li class="even">Item 4</li>
	<li class="odd">Item 5</li>
	<li class="even">Item 6</li>
</ul>

Settings

Valid elements

a elements (links), <input type="checkbox"> elements (checkboxes) or <input type="button"> elements (buttons)

Classname

grouptoggler

Attributes

None

CSS parameters (what’s this?)

targetClass (required)
Must be set as the CSS class of the elements you wish to toggle.
delay (optional, default = 0)
Sets the number of seconds delay before the visibility of the elements with the target class name is toggled