使用父onclick事件显示和隐藏隐藏的div

Question

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> 

Answer 1

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