【jQuery】実務で行ったアコーディオンへの追加要素

スマートフォンが普及してからWEBページにおけるアコーディオンの実装が多く見受けられるようになりました。
アコーディオンを実装することによって、画面が狭いスマホのコンパクト化を可能としており、情報量の多いページでは特に活躍します。

この、アコーディオンはjQueryで実装するのが一般的ですが、実装のレベルとしては基本中の基本といえるくらい簡単です。
プラグインを導入する必要もなく、記述は数行程度で済みます。まさに、コピペレベルです。
「アコーディオン jQuery」などのキーワードでググると実装方法が大量にでてきます。
下記のLIGさんの記事なんかが分かりやすいですね。
https://liginc.co.jp/web/js/jquery/34048

基本的なアコーディオンの実装方法

基本的にはdt、ddタグを利用してアコーディオンを実装します。
dt→アコーディオンの「見出し」
dd→アコーディオンの「コンテンツ内容」

アコーディオンの追加仕様

アコーディオンの実装を数多く行っていると、ちょっと、変わった仕様の実装を求められる時もあります。
今回紹介するケースでは「アコーディオンのコンテンツ内容に量があるので、アコーディオンを開いた時に見出しがページ上部へくっつくようにしてほしい」との要望を受けました。
デモページではアコーディオンを開くと見出しが画面トップに移動します。

>> DEMOはこちらから！

追加仕様を組み込んだアコーディオンの仕組み

$(function() {
    $(".accordion dt").on("click", function() {
        $(this).next().stop().slideToggle("",function(){

        if( $("dt").hasClass("active") ){
            var target = $(".active").offset().top;
            $("body").animate({scrollTop:target},"fast");
        }

        }).siblings('dd:visible').slideUp();
        $(this).toggleClass("active");
        $(this).siblings("dt").removeClass('active');
    });
});

もし、dtタグにactiveというclassがついたらoffset()で画面に上部に移動させる
という単純な仕組みとなっています。
また、過去に先輩から「アコーディオンは連続でタップした時に連続で開閉されるのを防ぐため.stopを付与するべきだ」とのアドアバイスをもらったことがあり、以降アコーディオンを実装する際には.stopの記述をするようにしています。

この記事を書いた人（著者情報）

片山

カタチップ編集長。昭和生まれの30代でWeb業界歴は10年以上。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのWebディレクター兼マークアップエンジニアを担当。最近はSNSの運用にも業務範囲を拡大中です。