jQuery:jQueryを使用して<div>要素の表示・非表示

jQueryを使用して<div>要素をクリックした場合、別の<div>要素の表示・非表示を行いました。
また、jQueryを使用せずにjavascriptでも行った場合の方法を記載します。
jQuery日本語リファレンスを参考にしました。

■ jQueryメモ

toggle()

各要素のうち、表示状態にあるものを非表示にし、非表示状態にあるものは表示状態にします。

■ 使用例(jQuery)

[javascript]

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    // 「id="jQueryBox"」を非表示
    $("#jQueryBox").css("display", "none");

    // 「id="jQueryPush"」がクリックされた場合
    $("#jQueryPush").click(function(){
        // 「id="jQueryBox"」の表示、非表示を切り替える
        $("#jQueryBox").toggle();
    });
});
</script>

[HTML]

<div id="jQueryPush">クリック(jQuery)</div>
<div id="jQueryBox">
    <p>jQueryを使用し表示・非表示</p>
</div>

■ サンプル(jQuery)

【ここをクリック(jQuery)】

jQueryを使用し表示・非表示

■ 使用例(javascript)

[javascript]

<script type="text/javascript">
window.onload = function(){
    Box = document.getElementById("javascriptBox");        // 「id="javascriptBox"」をBox変数に格納
    Push = document.getElementById("javascriptPush");    // 「id="javascriptPush"」をPush変数に格納
    Box.style.display = 'none'; // Box変数のstyleを「display: none;」にする

    // Push変数がクリックされた場合
    Push.onclick = function(){
        // 「id="javascriptBox"」が「display: block;」の場合、クリックすると「display: none;」にする。
        // また「id="javascriptBox"」が「display: none;」の場合、クリックすると「display: block;」にする。
        Box.style.display = Box.style.display == 'block' ? 'none' : 'block';
    }
}
</script>

[HTML]

<div id="javascriptPush" onclick="return false;">クリック(javascript)</div>
<div id="javascriptBox">
    <p>javascriptで表示・非表示</p>
</div>

■ サンプル(javascript)

【ここをクリック(javascript)】

javascriptで表示・非表示

  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です