Make a div tag toggle between two css classes [duplicate]

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
– mplungjan

2014-01-08 18:10:09 +00:00
Commented Jan 8, 2014 at 18:10 — mplungjan
– mplungjan, Commented Jan 8, 2014 at 18:10

Khaled Hamdy · Accepted Answer · 2014-01-08 18:03:32Z

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 8, 2014 at 18:03

Khaled Hamdy

3862 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

James Over a year ago

This is old, but saved me. Thank you for the simple and beautiful answer! Also, the example was amazing!

Jarad Over a year ago

You don't need to remove the existing class first?

InsertCheesyLine Over a year ago

@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'

php-dev · Accepted Answer · 2014-01-08 18:03:25Z

0

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

answered Jan 8, 2014 at 18:03

php-dev

7,1864 gold badges27 silver badges39 bronze badges

Comments

mplungjan · Accepted Answer · 2021-02-09 11:57:09Z

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 9, 2021 at 11:57

answered Jan 8, 2014 at 18:15

mplungjan

180k29 gold badges183 silver badges246 bronze badges

2 Comments

jxwd Over a year ago

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.

mplungjan Over a year ago

@jxwd 7 year old solution. I updated it to 2021

Ghost Echo · Accepted Answer · 2014-01-08 18:14:50Z

-2

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/

answered Jan 8, 2014 at 18:14

Ghost Echo

2,0675 gold badges33 silver badges46 bronze badges

Collectives™ on Stack Overflow

Make a div tag toggle between two css classes [duplicate]

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Linked

Related