クリエイターのためのWebテク講座 -アコーディオンメニューを作ろう（1）

アコーディオンメニューに挑戦します。今回は、まず簡単なものを作って、アコーディオンメニューの基本的な動きを学習しましょう。

まずはシンプルなアコーディオンを作る

サンプルは、メニューのタイトルも含めたBOXの、閉じたときの高さが40px、開いたときの高さを300pxに固定して、メニューのタイトルをクリックすると、クリックされたBOX以外を高さ40pxに、クリックされたBOXを300pxにするという簡単なものです。

まずはこのサンプルで、アコーディオンメニューの動作を理解していきましょう。ではまずはHTMLのソースを見てみましょう。

<body>
<div onClick="openFunc(this);" id="data1">
<h2>メニュー1</h2>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>

<div onClick="openFunc(this);" id="data2">
<h2>メニュー2</h2>
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
</div>

<div onClick="openFunc(this);" id="data3">
<h2>メニュー3</h2>
<p>ccccccccccccccccccccccccccccccccc</p>
<p>ccccccccccccccccccccccccccccccccc</p>
<p>ccccccccccccccccccccccccccccccccc</p>
<p>ccccccccccccccccccccccccccccccccc</p>
<p>ccccccccccccccccccccccccccccccccc</p>
<p>ccccccccccccccccccccccccccccccccc</p>
</div>
</body>

この様に、各BOXに、[data1][data2][data3]とIDを振って、それぞれのメニューのタイトルを「h2タグ」で設定しています。これは別に「h2」でなくてはならないという訳ではありません。全て自分で実装するわけですから、「h3」でもなんでも構いません。

次にスタイルシートを見てみましょう。

<style type="text/css">
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}

#data1 , #data2 , #data3
{
    overflow:hidden;
    margin-bottom:5px;
    height:300px;
}
h2
{
    background:#CCC;
    cursor:pointer;
    margin:0;
    padding:0;
    height:40px;
}
p
{
    margin:0;
    padding:0;
}
</style>

[data1][data2][data3]は、「overflow:hidden;」を指定します。そうしないと、高さを縮めたときに、中のコンテンツがはみ出てしまうためです。

必須な設定はそれだけですので、それ以外のスタイル設定は、デザインに合わせて適宜変更してください。

次にJavaScriptの記述を見てみましょう。

<script type="text/javascript">
$(function()
{
    $("#data1").height(40);
    $("#data2").height(40);
    $("#data3").height(40);
});

function openFunc(value)
{
    var target = $(value);

    $("#data1").height(40);
    $("#data2").height(40);
    $("#data3").height(40);

    $(value).height(300);
}
</script>

まずは、document.redyで実行する「$(function(){});」内で、「heightメソッド」を使って、各ボックスの高さを40pxにし、閉じた状態にします。あとは、メニューをクリックした時のイベントハンドラで、クリックしたBOX以外を40pxにし、対象のBOXを、引数「this」を使い、300pxに設定します。

如何でしょうか、アコーディオンメニューの作りかたのイメージができたのでは無いでしょうか？次は、もう少し突っ込んで、より高機能なアコーディオンを目指します。