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?

Answer 1

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/