Make a div tag toggle between two css classes

Question

What i want to do is to change the class of the div tag with a toggle button using javascript. So that when i press the button once the div tag gets the show class, and when i press the same button again it gets the hide class. Is this possible?

html:

<a id="togglebutton">Show/hide</a>

<div class="show"> 
   I want this div to toggle between the 'show' class and the 'hide' class
</div>

css:

.show {
    display: block;
}


.hide {
    display: none;
}

js:

function toggle(){
    var hide = document.querySelector(".hide");
    var show = document.querySelector(".show");

}

var hidebutton = document.querySelector(".togglebutton");
hidebutton.onclick = toggle

Would document.getElementById("MyId").className = "MyClass"; be usable somehow?

#togglebutton not .togglebutton which is a class not an ID – mplungjan Jan 08 '14 at 18:10 — mplungjan, Jan 08 '14 at 18:10

score 11 · Accepted Answer · answered Jan 08 '14 at 18:03

11

You can use

if(document.getElementById("MyId").className == "hide")
   document.getElementById("MyId").className = "show";
else
   document.getElementById("MyId").className = "hide";

But you need first to give an ID to the div.. Please find below a working example: http://jsfiddle.net/HvmmY/

answered Jan 08 '14 at 18:03

Khaled Hamdy

378
2
10

This is old, but saved me. Thank you for the simple and beautiful answer! Also, the example was amazing! – James Nov 30 '21 at 05:15
You don't need to remove the existing class first? – Jarad Jan 24 '22 at 20:47
@Jarad it's used under the assumption that only one class needs to be present at time. Writing to `className` overwrites any other class that was present there, thus becoming a 'toggle' – InsertCheesyLine Apr 14 '22 at 10:39

score 0 · Answer 2 · answered Jan 08 '14 at 18:03

If you are just trying to show / hide an element, you can use the style.display property :

hidebutton.onclick = function(){
    var div = document.getElementsByClassName('show').item(0);
    if(div.style.display == '') {
        div.style.display = 'none';
    } else {
        div.style.display = 'block';
    }
}

Hope it helps

mplungjan · Answer 3 · 2021-02-09T11:57:09.793

0

I would suggest to toggle the hide class

window.addEventListener("load", function() {
  document.getElementById("togglebutton").addEventListener("click", function(e) {
    e.preventDefault(); // stop the link
    var show = this.innerHTML == "Show";
    document.getElementById(this.dataset.id).classList.toggle("hide",!show)
    this.innerHTML = show ? "Hide" : "Show";
  })
})

.hide { display:none;}

<a href="#" id="togglebutton" data-id="toggleDiv">Hide</a>

<div id="toggleDiv" class="show">
  I want this div to toggle between the 'show' class and the 'hide' class
</div>

edited Feb 09 '21 at 11:57

answered Jan 08 '14 at 18:15

mplungjan

169,008
28
173
236

This is a good solution (I voted it up). Could be even better if it got the id of the element as it was clicked, because there may be multiple divs to toggle. – jxwd Feb 09 '21 at 11:47
@jxwd 7 year old solution. I updated it to 2021 – mplungjan Feb 09 '21 at 11:57

score -2 · Answer 4 · answered Jan 08 '14 at 18:14

I like to use jquery for adding/removing <div> classes. However, it might not work in your situation.

You might be able to use jQuery on it with toggle:

$('#box').click(function() { $('#box2').toggleClass('show hide'); });

Working example: http://jsfiddle.net/mFA5F/1/

Information on toggle() can be seen here: http://api.jquery.com/toggle/

Make a div tag toggle between two css classes

4 Answers4