Blog

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

2016.01.29 | jQuery | 407views


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

実にカンタンです。

このエントリーが役に立ったらシェアしてください


LLC JIRIKI HOME

この記事を書いた人

淵上 喜弘

著者:LLC JIRIKI

合同会社ジリキ 代表社員兼、業務執行社員。
1979年生まれ 兵庫県尼崎市出身・明石市育ち。

川崎医療福祉大学を卒業後、日産サティオ岡山に就職し初年度新人賞をカルロス・ゴーンCEOより受賞。その後NTT関連フレッツ販売会社に再就職し、地域賞2位を受賞。OCN販売表彰2位も同時受賞するとともにBフレッツ単独販売数の記録を打ち立てる。2006年合同会社ジリキ設立。SEO、WEBサイト制作業を開始する。

SEOで「大阪 探偵」や「離婚 行政書士」などのキーワードや「子ども 教材」「スマートフォンケース」など各種キーワードで1位を獲得。サイト制作でも毎日コミュニケーションズ・マイナビ女子オープンのサイトを制作。その後ECサイト運営サポートに着手し、売上月商50万のストアを1年半で1700万の月商に成長させる。

スマートフォンケースなどの商品企画開発も手がけ、楽天ランキングでも1位獲得、家電ジャンルMVPなどECサイトコンサルティングでも実績あり。

現在、グロースハックに注力しており様々な業種のサイトのCVアップをサポート中。チームとしてのグロースハック実績ではKaizenグロースハッカー総合 Top 20%、不動産 Top 10などを頂いています。

プログラミングは本業ではなくあくまでも趣味の一環として取り組んでいます。月1回ペースで東京へ出張へ行っておりますので、機会があれば是非お話をしましょう。

LLC JIRIKI