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 1

Code:

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

Toggling using Select elements

Much like checkboxes and radiobuttons, you can use a <select> element to trigger class changes on multiple targets. The class name to toggle can be set for all <option> elements, or individually on each option, using data-classtoggle-target. Targets are set using data-classtoggle-target on each individual <option>.

Item 1
Item 2
Item 3
Item 4

Code:

<label>Select one: <select data-classtoggle-class="active">
    <option>Select one…</option>
    <option data-classtoggle-target="#ex-select-1" value="/item/1">Item 1</option>
    <option data-classtoggle-target="#ex-select-2" value="/item/2">Item 2</option>
    <option data-classtoggle-target="#ex-select-3" value="/item/3">Item 3</option>
    <option data-classtoggle-target="#ex-select-4" data-classtoggle-class="red" value="/item/4">Item 4 (Red)</option>
</select></label>

<div id="ex8-targets">
    <div class="target ex-targets" id="ex-select-1">Item 1</div>
    <div class="target ex-targets" id="ex-select-2">Item 2</div>
    <div class="target ex-targets" id="ex-select-3">Item 3</div>
    <div class="target ex-targets" id="ex-select-4">Item 4</div>
</div>

Toggling using Checkboxes and Radiobuttons

Radio: Yes
Radio: No
Radio: Maybe
Check

Code:

<p>Some radiobuttons:</p>

<label>
    <input type="radio" name="ex8-radio" data-classtoggle-class="active" data-classtoggle-target="#ex8-target-radio-yes" />
    Yes
</label>
<label>
    <input type="radio" name="ex8-radio" data-classtoggle-class="active" data-classtoggle-target="#ex8-target-radio-no" />
    No
</label>
<label>
    <input type="radio" name="ex8-radio" data-classtoggle-class="active" data-classtoggle-target="#ex8-target-radio-maybe" />
    Maybe
</label>
<label>
    <input type="checkbox" data-classtoggle-class="active" data-classtoggle-target="#ex8-target-radio-check" />
    Check
</label>

<div id="ex8-targets">
    <div id="ex8-radio-yes">
        Radio: Yes
    </div>
    <div id="ex8-radio-no">
        Radio: No
    </div>
    <div id="ex8-radio-maybe">
        Radio: Maybe
    </div>
    <div id="ex8-check-target">
        Check
    </div>
</div>

Reverse toggling

Sometimes, you want to remove classes when a checkbox or radiobutton is checked and add them back when they're unchecked – a reverse toggle of sorts. To do this, simply prefix your code with the double-minus explicit remove token:

Remove when Checked
Add when Checked

Code:

lt;p>Some checkboxes:</p>

<label>
    <input type="checkbox" data-classtoggle-class="--active" data-classtoggle-target="#ex8-target-check-remove" />
    Check
</label>
<label>
    <input type="checkbox" data-classtoggle-class="++active" data-classtoggle-target="#ex8-target-check-add" />
    Check
</label>

<div id="ex8-targets">
    <div id="ex8-target-check-remove" class="active">
        Remove when Checked
    </div>
    <div id="ex8-target-check-add">
        Add when Checked
    </div>
</div>

Toggling Multiple Classes

Toggles between multiple, comma separated classes on a target element. Does not check for existence of the classes and simply toggles them all. This link will toggle the .active class on the example div elements below.

Multiple target divs are shown below to demonstrate the capabilities with regards to multiple states.

Target 2.1
Target 2.2
Target 2.3

Code:

<p>
    <a href="#ex2-targets" data-classtoggle-class="active,bordered"
       data-classtoggle-target=".ex2-targets">Toggle</a>
</p>
<div id="ex2-targets">
    <div id="ex2-target1" class="ex2-targets">Target 2.1</div>
    <div id="ex2-target2" class="ex2-targets active">Target 2.2</div>
    <div id="ex2-target3" class="ex2-targets bordered">Target 2.3</div>
</div>

Explicitly adding and removing classes

ClassToggle has the ability to explicitly add and remove classes instead of just toggling them. To do this, prepend your classnames with either double minus -- to explicitly remove them, or double plus ++ to explicitly add them.

For example, the following links will change the state of the div below: Left, Centre, Right.

Left
Centre
Right

Code:

<p>
    <a href="#ex7-targets" data-classtoggle-class="++off-left,--off-right">Left</a>
    <a href="#ex7-targets" data-classtoggle-class="--off-left,--off-right">Centre</a>
    <a href="#ex7-targets" data-classtoggle-class="--off-left,++off-right">Right</a>
</p>
<div id="ex7-targets" class="target-offset-container">
    <div class="target-offset-group">
        <div class="target-offset target-left">Left</div>
        <div class="target-offset target-centre">Centre</div>
        <div class="target-offset target-right">Right</div>
    </div>
</div>

Toggle Between Two Classes

Switch between two classes on a target element. Checks to see if any of the main classes exists before toggling the alternate. This link will switch between .red and .green on the target element.

Target 3

Code:

<p>
    <a href="#ex3-target" data-classtoggle-class="red" 
       data-classtoggle-altclass="green">Toggle</a>
</p>
<div id="ex3-target" class="red">Target 3</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 4

Code:

<p>
    <a href="#ex4-target" data-classtoggle-class="active" 
       data-classtoggle-trigger-activeclass="trigger-active">Toggle</a>
</p>
<div id="ex4-target">Target 4</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 5

Code:

<p>
    <a href="#ex5-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="#ex5-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="ex5-target">Target 5</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 6

Code:

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

Using ClassToggle as a rudimentary Tab Controller

ClassToggle can be used to toggle a set of target elements in the same way as a tab controller.

Link 1, Link 2, Link 3, Link 4, Link 5

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5

Code:

<p>
    <a id="ex-tablink1" class="ex-tablinks" href="#ex-tab1" data-classtoggle-class="++active" data-classtoggle-trigger-selector=".ex-tabs, .ex-tablinks" 
                                                            data-classtoggle-trigger-activeclass="--active">Link 1</a>,
    <a id="ex-tablink2" class="ex-tablinks" href="#ex-tab2" data-classtoggle-class="++active" data-classtoggle-trigger-selector=".ex-tabs, .ex-tablinks" 
                                                            data-classtoggle-trigger-activeclass="--active">Link 2</a>,
    <a id="ex-tablink3" class="ex-tablinks" href="#ex-tab3" data-classtoggle-class="++active" data-classtoggle-trigger-selector=".ex-tabs, .ex-tablinks" 
                                                            data-classtoggle-trigger-activeclass="--active">Link 3</a>,
    <a id="ex-tablink4" class="ex-tablinks" href="#ex-tab4" data-classtoggle-class="++active" data-classtoggle-trigger-selector=".ex-tabs, .ex-tablinks" 
                                                            data-classtoggle-trigger-activeclass="--active">Link 4</a>,
    <a id="ex-tablink5" class="ex-tablinks" href="#ex-tab5" data-classtoggle-class="++active" data-classtoggle-trigger-selector=".ex-tabs, .ex-tablinks" 
                                                            data-classtoggle-trigger-activeclass="--active">Link 5</a>
</p>

<div id="ex-tabs-targets">
    <div class="target ex-targets ex-tabs" id="ex-tab1">Tab 1</div>
    <div class="target ex-targets ex-tabs" id="ex-tab2">Tab 2</div>
    <div class="target ex-targets ex-tabs" id="ex-tab3">Tab 3</div>
    <div class="target ex-targets ex-tabs" id="ex-tab4">Tab 4</div>
    <div class="target ex-targets ex-tabs" id="ex-tab5">Tab 5</div>
</div>