Make a div tag toggle between two css classes

javascript toggle hide show
Andrew P picture Andrew P · Jan 8, 2014 · Viewed 11.3k times · Source

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?

Answer

Khaled Hamdy picture Khaled Hamdy · Jan 8, 2014

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/

Related questions

Jquery, hide & show list items after nth item

Say I have an unordered list, like so: <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <…

Read More
How to getElementByClass instead of GetElementById with JavaScript?

I'm trying to toggle the visibility of certain DIV elements on a website depending on the class of each DIV. I'm using a basic JavaScript snippet to toggle them. The problem is that the script only uses getElementById, as getElementByClass …

Read More
How to toggle a boolean?

Is there a really easy way to toggle a boolean value in javascript? So far, the best I've got outside of writing a custom function is the ternary: bool = bool ? false : true;

Read More