CODEWITHSUNDEEP
javascripthtmlcss
Gil
Gil

Reputation: 173

How to toggle a div that is hidden on page load

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

Upvotes: 1

Views: 2603

Answers (3)

Udochukwu Enwerem
Udochukwu Enwerem

Reputation: 2843

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>

Upvotes: 2

Mamun
Mamun

Reputation: 68933

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>

Upvotes: 2

Lewis
Lewis

Reputation: 4595

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>

Upvotes: 0

Related Questions