この記事は最終更新日から2年以上が経過しており、情報が古くなっている可能性があります。

jQueryを用いたトグル式の展開パネルの作り方をメモります。
というかこういう開き方をするパネルって何と呼ぶのが正しいんでしょうかね。
アコーディオンパネルとはまた違うし……。


まずはjQueryを用意して、JavaScriptを記述します。

<script type="mce-text/javascript" src="jquery.js" charset="utf-8"></script>
<script type="mce-text/javascript">
$(document).ready(function(){
$("ボタンのセレクタ").click(function(){
$("展開パネルのセレクタ").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>

次はHTMLを記述して行きます。
<div id=”展開パネルのセレクタ”></div>内に、リンクボタンやツイッターのタイムラインなどパネルに表示させるものを入れて下さい。

<a href="#" id="ボタンのセレクタ"></a>
<div id="展開パネルのセレクタ"></div>

最後にCSSで表示を整えます。
この作例では配置位置を左上に指定してあります。
“#ボタンのセレクタ.active”セレクタにはパネル展開時のボタンの状態を指定します。

#ボタンのセレクタ {
position: absolute;
z-index: 999;
top: 0;
left: 0;
display: block;
z-index: 999;
}
#ボタンのセレクタ.active  {
}
#展開パネルのセレクタ {
position: absolute;
display: none;
top: 0;
left: 0;
z-index: 1;
}

以上、こんな感じです。