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で表示・非表示
