Make a div tag toggle between two css classes

hide, javascript, show, toggle

Solution

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/

Problem

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?

Original source

Related problems