アコーディオン [jQuery] [js]

html

<dl>
<dt>見出し1</dt>
<dd>内容1（テキストや画像など）</dd>
<dt>見出し2</dt>
<dd>内容2（テキストや画像など）</dd>
<dt>見出し3</dt>
<dd>内容3（テキストや画像など）</dd>
</dl>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

webページを読み込んだときに表示しておく見出し（dt）と非表示にしておくその内容（dd）をdlタグを利用して組んでおきます。

• ここではdl（dt/dd）タグを使用していますが、他のタグでも良いです。
• ここでは全部閉じていますが、最初に開いておきたい場合は、該当タグに開いたときに追加するclassがあればあらかじめ設定しておきます。
• 同一ページにアコーディオンにするdlとしないdlが混在する場合は、アコーディオンにするものを識別できるように、dlタグにセレクタとして任意のclass名やid名をつけてください。

css

dt{
    cursor: pointer; /* PCの場合クリックできる部分と分かりやすいように、マウスオーバーでポインターになるように設定。*/
    /*何もしていないときの見出しの設定*/
}
dt.open{
    /*アコーディオンを開いたときの見出しの設定*/
}
dd{
    display: none; /*内容部分は最初非表示にしておく*/
    /*アコーディオンを開いたときの内容部分の設定*/
}

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

アコーディオンを開閉したときの状態をそれぞれcssで設定しておきます。
サンプルの場合は、背景色を変えるようにしました。

最初に読み込んだときに開いておきたい場合は、（このサンプルなら）該当するddタグをdisplay: block;にしておきます。

js

アコーディオンはこのようなシンプルなコードで実現できます。

$(function(){
    $('dt').on('click', function() {
        $(this).next().slideToggle();
        $(this).toggleClass('open');
    });
});

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

dtタグをクリックするたびに、クリックしたdtタグ（this）のすぐ次に来るタグ（next() = dd）を上下にスライドさせています。
その際、クリックしたdtタグ（this）にclass[open]（開いたときの見出しの設定）を追加したり削除したりさせます。

slideToggleの()内では、開閉のスピードを設定したり、コールバック関数を追加できたりします。
アコーディオンが開いた（閉じた）直後に何らかの処理を加えたい場合などにはコールバック関数で処理を追加してみてください。

js

上のコードに処理を追加して、アコーディオンの開閉の状態によって表示を変えます（ここではdtタグのテキストを変えます）。

$(function(){
    $('dt').on('click', function() {
        $(this).next().slideToggle();
        $(this).toggleClass('open');

        var check = $(this).attr('class');
        if(check.indexOf('open') != -1) $(this).text('クリックして閉じる');
        else $(this).text('クリックして開く');
    });
});

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

クリックしたdtタグ（this）のclass属性に[open]が含まれるかどうかで開閉の状態を検出し、テキストを差し替えます。

js

最初のコードにsiblingsを使った処理を追加して、見出しのどれかをクリックしてアコーディオンをクリックすると、他は閉じるようにします。

$(function(){
    $('dt').on('click', function() {
        $(this).next().slideToggle();
        $(this).toggleClass('open');

        $(this).next().siblings('dd').slideUp();
        $(this).siblings('dt').removeClass('open');
    });
});

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

クリックしたdtタグ（this）の次のタグ（ddタグ）の兄弟要素で指定したタグ（thisの次のddタグ以外のddタグ）に対してslideUp（開いてある内容部分を閉じる）処理を追加し、さらにクリックしたdtタグ（this）以外のdtタグからclass[open]を削除する処理を追加しています。

js

closestを用いて、アコーディオン部分以外をタップ（クリック）しても閉じるようにします。

$(function(){
    $('dt').on('click', function() {
        $(this).next().slideToggle();
        $(this).toggleClass('open');
    });

    $(document).on('click', function(evt){
        if( !$(evt.target).closest('dt, dd').length ){
            $('dd').slideUp();
            $('dt').removeClass('open');
        }
    });
});

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

htmlページのどこかをクリックしたら、アコーディオンを閉じる処理を追加しています。その際、closestをつかってアコーディオン部分を除くようにしています。

html

<figure>
    <img src="画像のパス" alt="">
    <figcaption>画像の説明</figcaption>
</figure>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

想定として画像のキャプションということにしていますが、状況はこれに限りません。従って、使用するタグもfigcaptionに限りません。

同一ページにアコーディオンにするfigcaptionとしないfigcaptionが混在する場合は、アコーディオンにするものを識別できるように、figcaptionタグやその親タグなどにセレクタとして任意のclass名やid名をつけてください。

css

figcaption{
    overflow: hidden;
    cursor: pointer; /* PCの場合クリックできる部分と分かりやすいように、マウスオーバーでポインターになるように設定。*/

    /*その他必要な装飾*/
}

figcaption.open{
    /*必要であればキャプションを開いたときの装飾*/
}

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

一行だけ表示した際に余計なものが表示されないよう、figcaptionにoverflow: hiddenを設定しておきます。

ここで初期値としてのキャプションの高さをcssで指定してしまわないことがコツです。

js

$(function(){
    var dh = '1.5em'; //デフォルトの高さ
    var figcap = $('figcaption');
    var h= new Array(); //figcaptionの高さを格納する配列

    figcap.each(function(index) { //ページ内に複数のfigcaptionタグがある場合はすべての高さを控えておく
        h.push($(this).innerHeight() + "px");
    });

    figcap.css('height', dh); //最初に一度すべてのfigcaptionの高さを一行分の高さ（デフォルトの高さ）にしておく

    figcap.on('click', function() {
        var index = figcap.index(this);
        var thisClass = $(this).attr('class');
        if(thisClass.indexOf('open') != -1){
            $(this).stop().animate({height:h[index]},'fast');
            $(this).addClass('open');
        } else {
            $(this).stop().animate({height:dh},'fast');
            $(this).removeClass('open');
        }
    });

    //おまけ（リサイズしたらリロードする）
    var timer = false;
    $(window).on('resize', function(){
        if (timer !== false) { //リサイズ中に何度も処理が行われるのを防ぐ
            clearTimeout(timer);
        }

        timer = setTimeout(function() {
            location.reload();
        }, 20);
    });
});

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

1. 2行目：キャプション部分のデフォルトの高さ（ここではテキスト1行分）を変数dhに格納
2. 3行目：figcaptionタグをセレクタとして頻繁に使用するので、扱いやすいように変数figcapに格納
3. 4行目：キャプション部分が開いたときの高さを格納するための配列変数hを用意。
4. 6〜8行目：キャプション部分が開いているときの高さを配列変数hに格納（同一ページに複数figcaptionがある場合に備えてeachをつかって配列に格納する）
   上記のcssでキャプション部分のデフォルトの高さを指定しなかったのは、あらかじめ指定しておいてしまうと、開いたときの高さではなく指定したデフォルトの高さを格納してしまうから。
5. 10行目：キャプション部分の高さをデフォルトの高さ（ここではテキスト1行分）に設定する。
   ここまでの処理は通常瞬間的に終わるので問題ないはずだが、ページ全体の処理の関係で一瞬キャプションが開いている状態がユーザに見えてしまうこともある。それが気になる場合は時間差で処理させるなど何らかの工夫を追加する。
6. 12〜22行目：キャプション部分（figcaptionタグ）をクリックしたときの処理
7. 13行目：ページ内のどのfigcaptionをクリックしたかindex関数を使って把握する。
8. 14行目：クリックしたキャプション部分（figcaptionタグ）のclassを変数thisClassに格納
9. 15〜21行目：クリックしたキャプション部分（figcaptionタグ）のclassに[open]が含まれているか否かで、キャプションの状態を把握し、それぞれの処理をする。
10. 16〜17行目：クリックしたキャプション部分（figcaptionタグ）のclassに[open]が含まれていなければ、キャプションは閉じているので、配列に格納しておいた開いたときの高さ（13行目で変数indexに格納した番号で配列を参照）まで、キャプション部分をanimateし、キャプション部分（figcaptionタグ）にclass[open]を追加。
11. 19〜20行目：クリックしたキャプション部分（figcaptionタグ）のclassに[open]が含まれていれば、キャプションは開いているので、デフォルトの高さ（ここではテキスト1行分）までキャプション部分をanimateし、キャプション部分（figcaptionタグ）のclass[open]を削除。
12. 25〜34行目：ここまでの処理ではスマートデバイスの場合、縦横回転した際に回転前に把握したキャプション部分が開いたときの高さのままに開閉されるので、開いたときにやたらと空間があったり逆にキャプション部分が全て表示されなかったりするので、回転したら（正確にはリサイズしたら）リロードするようにする。

最後のはおまけです。ページ全体をリロードするのは美しくないと思うので、他に良い方法があったらそちらの処理を行ってください。
また、この処理をすることで古いブラウザでは不具合があるかもしれないので、古いブラウザではこの処理をしないようにするなど、工夫が必要かもしれません。