jQuery toggle
simple jQuery plugin to toggle elements.
The plugin toggles a panel when its toggle is clicked, by changing classes on both the toggle and the panel. You'll have to use css to do the acutal showing/hiding; the css contains the most basis variant: toggling between display: block;
and display: none;
Basic setup: toggle sibling
to link toggle and toggle panel:
give toggle 2 classes: one general class js-toggle
and one state-specific class js-toggle--is-expanded
or js-toggle--is-collapsed
.
<a href="#" class="js-toggle js-toggle-expanded">show</a>
the panel gets two classes: one general class js-toggle-panel, and one depending on its default state: js-toggle-panel--expanded or js-toggle-panel--collapsed
<div class="js-toggle-panel js-toggle-panel--expanded"> panel content </div>
By default, the plugin searches for the first sibling of .js-toggle with class .js-toggle-panel
Toggle one or more specific panels
You can toggle one or more panels anywhere in the document by adding a data-attribute to both toggle and panel:
<a href="#" class="js-toggle" data-toggle-panel-id="my-panel">show</a> <div class="js-toggle-panel js-toggle-panel--expanded" data-toggle-panel-id="my-panel"> panel content </div>
Close panel when another opens (accordion)
When you give multiple toggles the same data-attribute data-toggle-group
, opening one will close the others.
<ul> <li> <a href="#" class="js-toggle js-toggle--is-expanded" data-toggle-group="my-toggle-group">toggle group - #1</a> <div class="js-toggle-panel js-toggle-panel--is-expanded"> toggle group panel #1 </div> </li> <li> <a href="#" class="js-toggle js-toggle--is-collapsed" data-toggle-group="my-toggle-group">toggle group - #2</a> <div class="js-toggle-panel js-toggle-panel--is-collapsed"> toggle group panel #2 </div> </li> <li> <a href="#" class="js-toggle js-toggle--is-collapsed" data-toggle-group="my-toggle-group">toggle group - #3</a> <div class="js-toggle-panel js-toggle-panel--is-collapsed"> toggle group panel #3 </div> </li> </ul>
Only open or close a panel
When you give a toggle the data-attribute data-toggle-expand-only
, it will expand its corresponding panel but won't close it; with the data-attribute data-toggle-collapse-only
, it wil collapse its panel but not expand it.