アコーディオンパネルで、展開・格納

2016年1月29日

ここにアコーディオンでコンテンツの収納・展開を行いたいなぁ。という時にサクッと実装できるTips。格納しているときは +(プラス)を出して、展開しているときは ー(マイナス)ボタンを出すときにも有効な手法です。呆気無くあっさりできるので、スマホ用ページなどでコンテンツが長くなりすぎる場合に利用するとCVへの導線もスムーズになるんじゃないですかね。

JQueryでアコーディオン



<h2 class="title-button">詳細はこちら</h2>

<div class="open-close">

<ul>
<li>うんたら</li>
<li>かんたら</li>
</ul>

</div>


ざっくりこういうコンテンツだとしましょう。classなどがない場合は、


$("セレクター").addClass("クラス名");

などで追加してアコーディオン格納エリアを確保。クリックする箇所にも同じようにclassを与えてあげましょう。


.open-close {
 display:none;
}

当然アコーディオンパネルですからデフォルトではdisplay:none; でいきます。クリックした時に.toggle()でshow()とhide()を切り替えていきます。


$(function() {
    $('.title-button').on("click", function(){
        $('.open-close').toggle("slow");
        $(".title-button").toggleClass("active");
    });
});

記述するスクリプトはこれだけ。後はh2のclassに背景を設定しておしまい。


.title-button {
    background-image: url(ボタンの画像);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16px;
}

.active {
    background-image: url(ボタンの画像);
}

実にカンタンです。

主な著書

Django

Flask

Bottle