クリックして要素を表示・非表示

jQueryのtoggle()を使用した自分用メモ。今回参考にさせていただいたのはjQuery日本語リファレンスというサイトです。とても分かりやすくて理解しやすかったです。ありがとうございました。

JavaScript

$(document).ready(function(){ // DOMがロードされて操作・解析が可能になったタイミングで関数を実行
    $("#simply h4").click(function(){ // id名simplyのh4ブロックをクリックすると
        $("#simply ul").toggle(); // id名simplyの子要素ulブロックの表示・非表示を切り替える
    });

    $("#detail h4").click(function(){ // 同様に
	$("#detail ul").toggle();
    })
});

(x)html

<div id="simply">
    <h4>簡易検索</h4>
    <ul>
        <li>項目</li>
	<li>項目</li>
	<li>項目</li>
    </ul>
</div>

<div id="detail">
    <h4>詳細検索</h4>
    <ul>
        <li>項目</li>
	<li>項目</li>
	<li>項目</li>
        <li>項目</li>
        <li>項目</li>
    </ul>
</div>

CSS

h4{
    background-color: #eee;
    cursor: pointer;
}

#detail ul{
    display: none; /* 表示した最初の時は非表示状態にしておくため */
}

実行サンプル

簡易検索と詳細検索という検索ブロックがあって、どちらも見出しタイトル部分をクリックすることで内容を表示・非表示するという設定。

id名にsimplyとdetailと付けたdiv要素が内包するh4要素をクリックすると、同じく内包するul要素を表示・非表示（切り替える）。クリッカブルだと分かるようにCSSでh4にcursorプロパティを指定。#detailのulにdisplay:noneを指定しているのは、こちらは最初はたたんで非表示にしておくから。