create a button that shows or hides a div depending on whether it is currently showing

Question

I'm fairly new in with JS and was wondering, if there is a more cleaner way of writing this code?

I'm trying to create a button that shows or hides a div depending on whether it is currently showing.

Many Thanks in Advance

Anne

var button = document.getElementById('button');
var hideText = document.getElementById('output').className = 'hide';

button.addEventListener('click', ()=>{
    if(hideText){
        document.getElementById('output').className = 'unhide';
        hideText = false;
    }else{
        document.getElementById('output').className = 'hide';
        hideText = true;
    }
})

CSS

.hide{display: none;}

.unhide{display: block;}

Answer 1

You can just toggle the classes

button.addEventListener('click', () => {
    document.getElementById('output').classList.toggle('hide');
}

Answer 2

Just use a single class (eg unhide ) and make it invisible by default. Then do

button.addEventListener('click', () => {
    document.getElementById('output').classList.toggle('unhide');
}

Answer 3

You can remove the extra variable hideText and also the extra css if you implement like this

var x = document.getElementById("output");
if (x.style.display === "none") {
    x.style.display = "block";
} else {
    x.style.display = "none";
}

In jquery the are other simpler possible way like toggle , hide , show .