ここにアコーディオンでコンテンツの収納・展開を行いたいなぁ。という時にサクッと実装できる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(ボタンの画像);
}

実にカンタンです。