Toggle class on HTML element without jQuery

You can toggle classes using the classList.toggle() function:

var element = document.getElementById('sidebar');
var trigger = document.getElementById('js-toggle-sidebar'); // or whatever triggers the toggle

trigger.addEventListener('click', function(e) {
    e.preventDefault();
    element.classList.toggle('sidebar-active'); // or whatever your active class is
});

That should do everything you need - if you have more than one trigger I'd recommend using document.querySelectorAll(selector) instead.


you can get any element by id with javascript (no jquery) and the class is an attribute : element.className so have this as a function:

UPDATE: since this is becoming a somewhat popular I updated the function to make it better.

function toggleClass(element, toggleClass){
   var currentClass = element.className || '';
   var newClass;
   if(currentClass.split(' ').indexOf(toggleClass) > -1){ //has class
      newClass = currentClass.replace(new RegExp('\\b'+toggleClass+'\\b','g'), '')
   }else{
      newClass = currentClass + ' ' + toggleClass;
   }
   element.className = newClass.trim();
}

HTML ONLY

You can use <summary>. The following code doesn't have any dependency. No JavaScript, CSS at all, HTML only.

<div class="bd-example">
  <details open="">
    <summary>Some details</summary>
    <p>More info about the details.</p>
  </details>

  <details>
    <summary>Even more details</summary>
    <p>Here are even more details about the details.</p>
  </details>
</div>

For more detail, go to MDN official docs.


You can implement it only by CSS3:

<label for="showblock">Show Block</label>
<input type="checkbox" id="showblock" />

<div id="block">
    Hello World
</div>

And the CSS part:

#block {
    background: yellow;
    height: 0;
    overflow: hidden;
    transition: height 300ms linear;
}

label {
    cursor: pointer;
}

#showblock {
    display: none;
}

#showblock:checked + #block {
    height: 40px;
}

The magic is the hidden checkbox and the :checked selector in CSS.

Working jsFiddle Demo.