CODEWITHSUNDEEP
javascripthtmldom
RevFonzAyy
RevFonzAyy

Reputation: 5

Show and hide hidden div with parent onclick event

I am trying to create a list of newsletter thumbnails that will show and hide with an onclick event of it's parent header. The function is called properly to show the list, but won't hide it again on a second click. I'm sure it's something simple I'm missing, but I am at a loss.

function showBabList() {
  if (document.getElementById('bablist').style.display = "none") {
    document.getElementById('bablist').style.display = "block";
  } else {
    document.getElementById('bablist').style.display = "none";
  }
}
<h2 onclick="showBabList()">BITSandBYTES Newsletters</h2>
<div id="bablist" style="display: none;">
  <ul>
    <a href="newsletter/BITSandBYTES2017-07.pdf" target="bab"><img src="images/thumbs/BITSandBYTES2017-07_thumb.png" class="babthumb" height="100px" width="75px"></a>
    <a href="newsletter/BITSandBYTES2017-08.pdf" target="bab"><img src="images/thumbs/BITSandBYTES2017-08_thumb.png" class="babthumb" height="100px" width="75px"></a>
  </ul>
</div>

Upvotes: 0

Views: 235

Answers (1)

kyun
kyun

Reputation: 10304

function showBabList() {
  if (document.getElementById('bablist').style.display == "none") {
    document.getElementById('bablist').style.display = "block";
  } else {
    document.getElementById('bablist').style.display = "none";
  }
}
<h2 onclick="showBabList()">BITSandBYTES Newsletters</h2>
<div id="bablist" style="display: none;">
  <ul>
    <a href="newsletter/BITSandBYTES2017-07.pdf" target="bab"><img src="images/thumbs/BITSandBYTES2017-07_thumb.png" class="babthumb" height="100px" width="75px"></a>
    <a href="newsletter/BITSandBYTES2017-08.pdf" target="bab"><img src="images/thumbs/BITSandBYTES2017-08_thumb.png" class="babthumb" height="100px" width="75px"></a>
  </ul>
</div>

WRONG
if (document.getElementById('bablist').style.display = "none")

CORRECT
if (document.getElementById('bablist').style.display == "none")

Upvotes: 1

Related Questions