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</div>
Switch between two classes on a target element. This link will switch between .red
and .green
on the target element.
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>
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="#ex3-target" data-classtoggle-class="active" data-classtoggle-trigger-activeclass="trigger-active">Toggle</a> </p> <div id="ex3-target">Target</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="#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>
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="#ex5-target" data-classtoggle-class="active">Toggle</a> </p> <div id="ex5-target">Target</div>