html - 2 つの div オーバーラップを設定し、クリック時に互いを非表示にする方法

Question

別の div に 1 div を設定したい、クリックすると 1 つの div を表示して別の div を非表示にしたい、

どうすればそれができますか？

<div id="div1">
            <ul>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
            </ul>
        </div>
        <div id="div2">
            <ul>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
            </ul>
        </div>

Answer 1

style.display 属性を使用して DIV を非表示にできます。

div1.style.display='none';  //will hide the div
div1.style.display='';      //will show the div