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 bees 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";
}
}

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 bees 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";
}
}

• javascript
• html
• button

• If you console.log(x.style.display) on page load while it is hidden using CSS, what is the value? – Blue Commented Jun 30, 2017 at 2:29
• i'm not sure how can I check the value? – Adan Burlington Commented Jun 30, 2017 at 2:32
• 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 Commented Jun 30, 2017 at 2: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 Commented Jun 30, 2017 at 2:45
• changing the logic works but wont hide the div now.... – Adan Burlington Commented Jun 30, 2017 at 2:52

3 Answers 3

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 pares 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 pare.

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>

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);

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";
}
}