classtoggler.js

classtoggler.js

A simple css class toggler for all kind of dropdowns, accordions, menus, also with a grouping option.

###Usage

####Simple with default active classes

<a href="#" data-toggler-target="#sub-menu">Profile</a>
<ul class="sub-menu" id="sub-menu">
   <li><a href="#">item 1</a></li>
   <li><a href="#">item 2</a></li>
   <li><a href="#">item 3</a></li>
</ul>

####Simple with custom css class

<a href="#" data-toggler-target="#sub-menu" data-toggler-class="test-class">Profile</a>
<ul class="sub-menu" id="sub-menu">
   <li><a href="#">item 1</a></li>
   <li><a href="#">item 2</a></li>
   <li><a href="#">item 3</a></li>
</ul>

####Grouping

the grouped elements will be holding the active css class only one at the time. (good for dropwdowns, accordions..)

<ul>
   <li>
      <a href="#" data-toggler-target="#sub-menu-1" data-toggler-group="navigation">Profile</a>
      <ul class="sub-menu" id="sub-menu-1">
         <li><a href="#">item 1</a></li>
         <li><a href="#">item 2</a></li>
         <li><a href="#">item 3</a></li>
      </ul>
   </li>
   <li>
		<a href="#" data-toggler-target="#sub-menu-2" data-toggler-group="navigation">team</a>
		<ul class="sub-menu" id="sub-menu-2">
         <li><a href="#">item 1</a></li>
         <li><a href="#">item 2</a></li>
         <li><a href="#">item 3</a></li>
      </ul>
	</li>
</ul>