Classtoggler Demo

With just a small touch of css and the Classtoggler you can achieve pretty complex UI elements. Have a look at the examples and feel free to reuse the css:

1. Simple dropdown navigation

Markup

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

							
	// remove active class if clicked outside of the navigation

	const navigation = document.getElementById('primary-nav');
	document.onclick = function(e) {
		const target = e.target;
		if (target !== navigation && !navigation.contains(e.target)){
			console.log('outside');
			classtogglerRemoveClassByGroup('navigation')
		}
	}
							
						

2. Accordion

Markup

							
	<div class="accordion">
	  <div class="accordion-item">
	    <a href="#" data-toggler-group="accordion" data-toggler-target="#item-1" class="accordion-title">item 1</a>
	    <div class="accordion-content" id="item-1">
	      Lorem ipsum dolor sit amet, consectetur adipisicing elit. At perferendis recusandae, nulla in laudantium ea accusantium ex tempore laborum molestias architecto facere excepturi quasi vel temporibus explicabo voluptas repellendus magni.
	      Lorem ipsum dolor sit amet, consectetur adipisicing elit. At perferendis recusandae, nulla in laudantium ea accusantium ex tempore laborum molestias architecto facere excepturi quasi vel temporibus explicabo voluptas repellendus magni.
	      Lorem ipsum dolor sit amet, consectetur adipisicing elit. At perferendis recusandae, nulla in laudantium ea accusantium ex tempore laborum molestias architecto facere excepturi quasi vel temporibus explicabo voluptas repellendus magni.
	    </div>
	  </div>
	  <div class="accordion-item">
	    <a href="#" data-toggler-group="accordion" data-toggler-target="#item-2" class="accordion-title">item 2</a>
	    <div class="accordion-content" id="item-2">
	      Lorem ipsum dolor sit amet, consectetur adipisicing elit. At perferendis recusandae, nulla in laudantium ea accusantium ex tempore laborum molestias architecto facere excepturi quasi vel temporibus explicabo voluptas repellendus magni.
	      Lorem ipsum dolor sit amet, consectetur adipisicing elit. At perferendis recusandae, nulla in laudantium ea accusantium ex tempore laborum molestias architecto facere excepturi quasi vel temporibus explicabo voluptas repellendus magni.
	      Lorem ipsum dolor sit amet, consectetur adipisicing elit. At perferendis recusandae, nulla in laudantium ea accusantium ex tempore laborum molestias architecto facere excepturi quasi vel temporibus explicabo voluptas repellendus magni.
	    </div>
	  </div>
	  <div class="accordion-item">
	    <a href="#" data-toggler-group="accordion" data-toggler-target="#item-3" class="accordion-title">item 3</a>
	    <div class="accordion-content" id="item-3">
	      Lorem ipsum dolor sit amet, consectetur adipisicing elit. At perferendis recusandae, nulla in laudantium ea accusantium ex tempore laborum molestias architecto facere excepturi quasi vel temporibus explicabo voluptas repellendus magni.
	      Lorem ipsum dolor sit amet, consectetur adipisicing elit. At perferendis recusandae, nulla in laudantium ea accusantium ex tempore laborum molestias architecto facere excepturi quasi vel temporibus explicabo voluptas repellendus magni.
	      Lorem ipsum dolor sit amet, consectetur adipisicing elit. At perferendis recusandae, nulla in laudantium ea accusantium ex tempore laborum molestias architecto facere excepturi quasi vel temporibus explicabo voluptas repellendus magni.
	    </div>
	  </div>
	  <div class="accordion-item">
	    <a href="#" data-toggler-group="accordion" data-toggler-target="#item-4" class="accordion-title">item 4</a>
	    <div class="accordion-content" id="item-4">
	      Lorem ipsum dolor sit amet, consectetur adipisicing elit. At perferendis recusandae, nulla in laudantium ea accusantium ex tempore laborum molestias architecto facere excepturi quasi vel temporibus explicabo voluptas repellendus magni.
	      Lorem ipsum dolor sit amet, consectetur adipisicing elit. At perferendis recusandae, nulla in laudantium ea accusantium ex tempore laborum molestias architecto facere excepturi quasi vel temporibus explicabo voluptas repellendus magni.
	      Lorem ipsum dolor sit amet, consectetur adipisicing elit. At perferendis recusandae, nulla in laudantium ea accusantium ex tempore laborum molestias architecto facere excepturi quasi vel temporibus explicabo voluptas repellendus magni.
	    </div>
	  </div>
	</div>
							
						

3. Hidden Menu

Two elements controlling one container, menu icon triggering the open and x icon the close event.

Markup

							
	<nav id="menu-wrapper">
	 <a href="#" data-toggler-target="#menu"><img src="img/menu.svg" alt=""></a>
	 <div id="menu">
	   <div class="menu-inner">
	     <a class="close" href="#" data-toggler-target="#menu">X</a>
	     <ul>
	       <li><a href="#">Item 1</a></li>
	       <li><a href="#">Item 2</a></li>
	       <li><a href="#">Item 3</a></li>
	       <li><a href="#">Item 4</a></li>
	     </ul>
	   </div>
	 </div>
	</nav>
							
						

4. Chaining

One element controlling two (or more) containers

Red Blue

Markup

										 
	<p class="text-center">
	  <button class="btn btn-danger" data-toggler-class="show" data-toggler-target="#section-1, #section-4">Red</button>
	  <button class="btn btn-primary" data-toggler-class="show" data-toggler-target="#section-2, #section-3">Blue</button>
	</p>
	<div class="row">
	  <div id="section-1" class="col-md-6 collapsed show">
	    <div class="card bg-danger text-white mb-4">
	      <div class="card-header">
	        <h2 class="mb-0">Red</h2>
	      </div>
	    </div>
	  </div>
	  <div id="section-2" class="col-md-6 collapsed show">
	    <div class="card bg-primary text-white">
	      <div class="card-header">
	        <h2 class="mb-0">Blue</h2>
	      </div>
	    </div>
	  </div>
	  <div id="section-3" class="col-md-6 collapsed show">
	    <div class="card bg-primary text-white">
	      <div class="card-header">
	        <h2 class="mb-0">Blue</h2>
	      </div>
	    </div>
	  </div>
	  <div id="section-4" class="col-md-6 collapsed show">
	    <div class="card bg-danger text-white mb-4">
	      <div class="card-header">
	        <h2 class="mb-0">Red</h2>
	      </div>
	    </div>
	  </div>
	</div>			
							
						

5. Update

Update the classtoggler after an element was added to the DOM

Red

JS - after updating the DOM

							
	classtogglerUpdate();
							
						

6. Chaining classes

HTML

							
		<a href="#" class="btn btn-blue" data-toggler-target="#my-button" data-toggler-class="btn, btn-primary, text-uppercase">Toggle classes</a>
		<a href="#" id="my-button">My button</a>
							
						

6. Form elements control

JS

							
	classtogglerForm('#test-form');