jQueryを使うと、これ以上無いっていうくらい簡単にクリックで開閉するボックスが作れてしまいす。

はじめに隠しておきたいボックスの設定。
jqueryでも出来ますが、jsが有効でないデバイス（今時かなりのマイノリティーと思いますが・・・）で、見えてしまうので、cssで設定する方が安心。
サンプルでは開いた時と閉じている時でスタイルを変える事が多いので、”toggleClass”で開いた時は指定した要素（サンプルではthis）にクラス”.active”が付くようにしています。

toggleはONとOFFのスイッチ操作なので、閉じた時には”.active”クラスはソース上から消してくれるます。なので、開閉に限らずスイッチが必要な所では、’slideToggle’よりも全然使用頻度が高いです。
但し、あくまでもONとOFFなので複雑な事する場合は別の方法を考えた方が良いです。

サンプルは縦に開閉する’slideToggle’とフェードイン・アウトする’fadeToggle’の2種類有りますが、基本的には同じで効果が違うだけです。

Example

Code

CSS

.toggle_box{
display:none;
color:#fff;
background-color:#f26c4f;
padding:20px;
margin-top:20px;
}
.btn{
background-color:#dddddd;
padding:10px;
}
.btn.active{
background-color:#1b325f;
padding:10px;
color:#fff;
}
.btn:hover{
cursor:pointer;
}
.box{
background-color:#132343;
width:100%;
height:20px;
margin-top:20px;
margin-bottom:20px;
}

js

$(function(){
$(".slide_btn").on("click", function() {
$(this).toggleClass("active");//開いた時、ボタンにクラスを追加
$(".slide_box").slideToggle("fast");//”slow”、”normal”、”fast”
});
$(".fade_btn").on("click", function() {
$(this).toggleClass("active");//開いた時、ボタンにクラスを追加
$(".fade_box").fadeToggle("slow");//”slow”、”normal”、”fast
});

html

<h2>SlideToggle</h2>
<p class="slide_btn btn">Click</p>
<div class="slide_box toggle_box">
<p>SlideToggle</p>
</div>
<h2>FadeToggle</h2>
<p class="fade_btn btn">Click</p>
<div class="fade_box toggle_box">
<p>FadeToggle</p>
</div>