Reputation: 5
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
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