Grab or fork the code from abitgone's jQuery Plugins repository.
Trigger a class on a target element. This link will toggle the .active
class on the example div element below.
Code:
<p> <a href="#ex1-target" data-classtoggle-class="active">Toggle</a> </p> <div id="ex1-target">Target 1</div>
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>
.
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>
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>
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:
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>
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.
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>
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.
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>
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.
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>
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.
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>
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.
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>
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:
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>
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
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>