ClassToggle Examples

Grab or fork the code from abitgone's jQuery Plugins repository.

Basic Usage

Trigger a class on a target element. This link will toggle the .active class on the example div element below.

Target

Code:

<p>
    <a href="#ex1-target" data-classtoggle-class="active">Toggle</a>
</p>
<div id="ex1-target">Target</div>

Toggle Two Classes

Switch between two classes on a target element. This link will switch between .red and .green on the target element.

Target

Code:

<p>
    <a href="#ex1-target" data-classtoggle-class="red" 
       data-classtoggle-altclass="green">Toggle</a>
</p>
<div id="ex2-target" class="red">Target</div>

Toggle Class on Target and Trigger

Toggles a class on a target element and the trigger. This link will toggle the .active class on the example div element below and will toggle .trigger-active on itself.

Target

Code:

<p>
    <a href="#ex3-target" data-classtoggle-class="active" 
       data-classtoggle-trigger-activeclass="trigger-active">Toggle</a>
</p>
<div id="ex3-target">Target</div>

Toggle Two Classes and Toggle Multiple Triggers

Switches between two classes on a target element and toggles an active class on all triggers matching .triggerset. Both this link and this additional link will toggle between .red and .green on the target element. Both links, regardless of which one triggered, will be targeted by .triggerset and have .trigger-active toggled on them.

Target

Code:

<p>
    <a href="#ex4-target" class="triggerset" data-classtoggle-class="red" 
       data-classtoggle-altclass="green" data-classtoggle-trigger-activeclass="trigger-active" 
       data-classtoggle-trigger-selector=".triggerset">Toggle 1</a> and 
    <a href="#ex4-target" class="triggerset" data-classtoggle-class="red" 
       data-classtoggle-altclass="green" data-classtoggle-trigger-activeclass="trigger-active" 
       data-classtoggle-trigger-selector=".triggerset">Toggle 2</a>
</p>
<div id="ex4-target">Target</div>

Toggling Classes and Retaining HREF

Where you want to use hyperlinks in cases where JavaScript may be disabled, you can use the data-classtoggle-target attribute. This link points to this page, but will target the DIV element below instead:

Target

Code:

<p>
    <a href="/ClassToggle/index.html" data-classtoggle-target="#ex5-target" data-classtoggle-class="active">Toggle</a>
</p>
<div id="ex5-target">Target</div>