スタートページ＞ Javascript＞ tips

ＣＳＳ div要素の表示・非表示

visibilityによる方法

style
　　#id1 { visibility: hidden; }
body
　　<button onclick="document.getElementById('id1').style.visibility = 'visible';">表示</button>
　　<button onclick="document.getElementById('id1').style.visibility = 'hidden';">非表示</button>
　　<div id="id1" style="color: blue">
　　　　：
　　</div>

ここから <div id="id1">　～　</div> の内容

この間の記述は自由です。

ここまで

ここからは　id="id1"　の範囲外の要素です。
上のように非表示の場合でも、id="id1"　の範囲が空白になります。

displayによる方法

style
　　#id2 { display: none; }
body
　　<button onclick="document.getElementById('id2').style.display = 'block';">表示</button>
　　<button onclick="document.getElementById('id2').style.display = 'none';">非表示</button>
　　<div id="id2" style="color: blue">
　　　　：
　　</div>
表示 非表示

ここから <div id="id2">　～　</div> の内容

この間の記述は自由です。

ここまで

ここからは　id="id2"　の範囲外の要素です。
上のように非表示の場合は、id2 の範囲は存在しないように見えます。

アコーディオン

display の応用です。▼をクリックすると展開し、▲で戻ります。

第１章

～第１章～ ▼ ▲

第２章

～第２章～ ▼ ▲

「～第２章～▼ ▲」の部分は、次の記述になります。

<p>～第２章～
    <span onClick="document.getElementById('c2').style.display = 'block';">▼</span>
    <span onClick="document.getElementById('c2').style.display = 'none';">▲</span></p>
    <div id="c2">
        <p class="blue">第２章第２節</p>
        <p class="blue">第２章第２節</p>
    </div>