親のonclickイベントで非表示divを表示/非表示

Question

親ヘッダーのonclickイベントで表示および非表示になるニュースレターサムネイルのリストを作成しようとしています。この関数は、リストを表示するために適切に呼び出されますが、2回目のクリックでそれを再び隠すことはありません。私はそれが私が行方不明のシンプルなものだと確信していますが、私は迷っています。

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 GEORGE BY
if (document.getElementById('bablist').style.display == "none")