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

サンプルを見る

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

サンプルは、メニューのタイトルも含めた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に設定します。

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

河野 義貴
インハウスのFlashクリエイターとして勤務後、2010年独立。一年間のフリーランス期間を経て、2011年9月にスウィーツアンドストリーム株式会社を設立。主にFlash・HTML5を駆使した、PC・スマートフォン向けインタラクティブコンテンツを中心に活動中。