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

前回のサンプルでは、アコーディオンを開いたときの高さは固定値を入れてましたが、これでは機能として不便です。今回は、前回のサンプルを改造して、開いたときの高さを自動で取得できるようにしてみましょう。

独自実装の属性を指定する

サンプルを開くと、中身のコンテンツに応じた高さで展開されます。もちろん、開いたときの高さをそれぞれコード内に記述している訳ではありません。ここでは、開いたときのサイズをjQueryの[heightメソッド]で取得し、それぞれのアコーディオンが開いたときのサイズとして設定します。

やり方としては、[maxHeight_1 , maxHeight_2 , maxHeight_3]といったように、変数を用意してもいいですし、配列に格納してもイイでしょうが、私のお勧めは、対象の要素に、独自実装の要素を入れてしまうという方法です。

具体的には下記のように記述します。

$(function()
{
    $("#data1").attr("maxHeight" , $("#data1").height());
    $("#data2").attr("maxHeight" , $("#data2").height());
    $("#data3").attr("maxHeight" , $("#data3").height());

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

この様に、[attrメソッド]で、適当な属性を追加し、FirebugやChromeのデバッガで、展開後のタグを見ると

<div id="data1" maxHeight="300">

この様に、属性が追加されます。どのような属性をいれるかどうかは、元々HTML5の仕様で策定されている要素名以外であれば、どんな名前でも構いません。このように、変数や配列ではなく、独自の属性を使うことで、

$("#data1").attr("maxHeight");

という記述で、展開後の高さを取得できます。こうすることで、実際に開閉する要素に、値を紐づける事が出来るので、その後のプログラミングがとても楽になります。

そうして高さを取得した後に、各メニューの高さを、閉じた状態にするために、40pxに設定します。ここが逆になると、正しく値を取得できません。

また、サンプルでは、開いた状態のメニューをクリックすると閉じるようになっていますが、これも、メニューの開閉状態を独自要素で実装します。

上の、[$(function()]内で、[maxHeight]を実装してるところで、以下のように記述します。

$("#data1").attr("opened" , "0");
$("#data2").attr("opened" , "0");
$("#data3").attr("opened" , "0");

まずは、各メニューに[opened]という名前で、[0:閉じている , 1:開いている]というルールでフラグを設定します。

次に、メニューをクリックした時の処理を以下のように記述します。

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

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

    if(target.attr("opened") == "0")
    {
        target.height(parseInt(target.attr("maxHeight") , 10));
        target.attr("opened" , "1");
    }
    else
    {
        target.attr("opened" , "0");
    }
}

前回のサンプルでは、一旦すべてを40pxに設定し、[target]で取得したメニューを、300pxに設定するというものでしたが、今回はそれに一個処理を追加します。 [if文]を使って、クリックされたメニューの[opened属性]を取得し、[0:閉じている]場合は[maxHeight]を渡してアコーディオンメニューを開き、[1:閉じている]場合は、40pxになったまま何もせず、[opened]の値を反転させます。

如何でしょうか？これで、中身のコンテンツになにが入ってきても、あとからいちいち値を調整する必要の無い、汎用性がある程度担保されたアコーディオンメニューを作ることが出来ました。

これは、例えば、メニューの方向が縦ではなく横方向の開閉になっても有効な手法なので、是非Webサイトのメインビジュアルなんかに採用して見ては如何でしょうか？