How to toggle a div that is hidden on page load

Question

I am using the following js to hide and show my div

function myFunction(test) {
    var x = document.getElementById(test);

    if (x.style.display == "none") {
        //x.style.display = "block";
        x.style.setProperty("display", "block", "important")
    } else {
        //x.style.display = "none";
        x.style.setProperty("display", "none", "important")
    }
}

I have all divs hidden on load using a class, which works, but you have to click a link twice to get it to unhide. How can I fix this to unhide on the first click?

The page Im working on is here, you can click on any of the titles to expand some section. (Ignore the formatting, it's very much a work in progress.)

http://thinkularity.eth.link

Answer 1

A very trivial and simple way to solve your problem is to first test if (x.style.display == "block") and if it is anything else to then display the hidden content. Another way is to include the style inline inside the html code so that the style property of the DOM object has some initial property immediately after rendering.

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

 #test { display:none; }

 <h3 onclick="myFunction('test')">Click to toggle display</h3><br> <div id="test">Now you see me</div><br>

Answer 2

Better if you create another class to show the element and toggle that class on each click using DOMTokenList.toggle() :

The toggle() method of the DOMTokenList interface removes a given token from the list and returns false . If token doesn't exist it's added and the function returns true .

Demo:

 function myFunction(test) { var x = document.getElementById(test); x.classList.toggle('showElement'); }

 .showNotes{ display: none; } .showElement{ display: block !important; }

 <h2><a onclick="myFunction('e23')" href="#23">023 Autonomy Day</a></h2> <div class="showNotes" id="e23"> This is my DIV element. </div> <h2><a onclick="myFunction('e22')" href="#22">022 Skateboarding In An Embassy</a></h2> <div class="showNotes" id="e22"> This is my DIV element. </div>

Answer 3

Your issue is the check before applying the style. On the first click, the element is set to display: none because on pageload, the element has no display property set, so when your code checks if (x.style.display == "none") , it gets false - so it sets it to display: none . Using the style property of a Node references the actual style property of the HTML element, and does not include CSS properties.

I would personally create two classes, .hidden and .visible , and use Node.classList.toggle to toggle the element class, but your approach works too.

We can change your if / else to a switch/case (or if / else if / else ) to set a default action if an element has no style.display property set - instead of hiding it by default, which is what was happening here, we will set display: block by default.

 function toggleHide(test) { var x = document.getElementById(test); var newValue; var visible = "block"; var hidden = "none"; switch(x.style.display) { case hidden: // show if hidden newValue = visible; break; case visible: // hide if visible newValue = hidden; break; default: // visible if style.display not set yet newValue = visible; break; } // clear out style.display x.style.setProperty("display", ""); // set new value x.style.setProperty("display", newValue); } // call toggleHide on header click document.getElementById("header").addEventListener("click", e => toggleHide("abc") );

 .dropdown { display: none; }

 <h1 id="header">Click me</h1> <p id="abc" class="dropdown">This is hidden by default</p>