Button to show/hide div has to be pressed twice

Question

My Goal: to have my div hidden on page load and show/hide the div with a button using only HTML/CSS/JavaScript.

I have set up a button in HTML and JavaScript to show/hide my div which works great when the div is visible on page load and not hidden using CSS. When I hide the div using CSS display: none; the div is hidden on page load but the button has to be clicked twice before the div becomes visible.

HTML:

  <button class="btn btn-link" id="btnLink" onclick="hideLink()">Hide 
  Content</button> <br><br>
  <div id="myLink">
  <h1>Div content here</h1>
  </div>

CSS:

#myLink {display: none;}

JavaScript:

function hideLink() {
var x = document.getElementById('myLink');
var b = document.getElementById('btnLink');


if (x.style.display === 'none') {
    x.style.display = 'block';
    b.childNodes[0].nodeValue="Hide Content";

} else {
    x.style.display = 'none';
    b.childNodes[0].nodeValue="Show Content";
}
}

If you `console.log(x.style.display)` on page load while it is hidden using CSS, what is the value? — Blue, Jun 30 '17 at 02:29
the div at first time while you click btn, you didn't set any value in display, so you call x.style.display is neither block nor none, the problem should be here — Horken, Jun 30 '17 at 02:39
the CSS block `#myLink {display: none;}` means that the element is hidden ... BUT, it has no inline style - therefore the first click will run the `else` block ... change your logic, check `if (display !== 'block')` instead — Jaromanda X, Jun 30 '17 at 02:45
Have a look at [this answer](https://stackoverflow.com/a/30311244/1765658) !! There is a way of doing things like this, by using CSS only! — F. Hauri - Give Up GitHub, Jun 30 '17 at 07:22

meain · Answer 1 · 2017-12-27T17:20:43.843

You should check for !== 'block' rather than === 'none'

The value x.style.display is set to blank when we use none in the css as the css selector is what gets the none attribute than the element ( at lease that is what I understand ). So the check === none actually compares it will blank and return false ( x.style.display = '').

Now once we have set the value to block using JS the element's style.display property has a value which we can compare.

function hideLink() {
  var x = document.getElementById('myLink');
  var b = document.getElementById('btnLink');


  if (x.style.display !== 'block') {
    x.style.display = 'block';
    b.childNodes[0].nodeValue = "Hide Content";

  } else {
    x.style.display = 'none';
    b.childNodes[0].nodeValue = "Show Content";
  }
}

#myLink {
  display: none;
}

<button class="btn btn-link" id="btnLink" onclick="hideLink()">
Show Content
</button>
<br><br>
<div id="myLink">
  <h1>Div content here</h1>
</div>

What is this magic,`!==`? How does this translate to one less click? — Alexander McNulty, Dec 24 '17 at 10:35
@AlexanderMcNulty I have updated the answer to describe what happens. — meain, Dec 27 '17 at 17:21

score 0 · Answer 2 · answered Jun 30 '17 at 02:44

The first time the button is clicked, the element itself does not specifically have the style for display set. After your first if/then, then it does.

See here: http://plnkr.co/edit/4peCJS1vhJskexqdLdKL?p=preview

var t = document.getElementById('output').innerText;
document.getElementById('output').innerText = JSON.stringify(x.outerHTML);

score 0 · Answer 3 · answered Jun 30 '17 at 03:07

corrected it with another if...

function hideLink() {
var x = document.getElementById('myLink');
var b = document.getElementById('btnLink');

if (x.style.display === ''){
    x.style.display = 'none';
}

if (x.style.display === 'none') {
    x.style.display = 'block';
    b.childNodes[0].nodeValue="Hide Sitemap Section";

} else {
    x.style.display = 'none';
    b.childNodes[0].nodeValue="Show Sitemap Section";
}
}

Button to show/hide div has to be pressed twice

3 Answers3

Linked

Related