HOME > jQuery > jQueryで動くアコーディオンの作り方【コピペで1分】

jQueryで動くアコーディオンの作り方【コピペで1分】

目次: jQueryで動くアコーディオンのDEMO; jQueryで動くアコーディオンの作り方解説; HTML記述; css記述; jQuery記述

jQueryで動くアコーディオンのDEMO

DEMOページ

jQueryで動くアコーディオンの作り方解説

jQueryを使用してアコーディオンの見出しとコンテンツが連動して動くように実装。

1．扱いやすくするためにHTMLは親要素と見出し、子要素のリスト（dl・dt・dd）要素で構成する
2．コンテンツ要素にdisplay:none;をかけて非表示にしておく
3．cssの擬似要素で開閉の「+」「-」を設定。cursor:pointerを見出しに設定してクリックが分かるように指定
4．jQueryを使用して見出しをクリックされたら、紐づいたコンテンツがdiplay:blockになるように設定
5．正しく動作していれば完成です。

HTML記述

HTMLをbody内の表示位置に記載します。

<dl class="accordion">
    <dt class="accordion-title">Q1.見出し1</dt>
    <dd class="accordion-content">A.コンテンツ1</dd>
    <dt class="accordion-title">Q2.見出し2</dt>
    <dd class="accordion-content">A.コンテンツ2</dd>
    <!-- dt/ddをコピーしたらアコーディオンを追加できます -->
</dl>

css記述

cssを<style>~</style>または自作cssの中に記述します。

<style>
/* リストのスタイルをリセット */
dl,dt,dd{
    margin: 0;
    list-style: none;
}

/* アコーディオン共通指定 */
.accordion-title,
.accordion-content {
    padding: 18px 20px 18px 40px;
    border-bottom: 1px solid #fff;
    position: relative;
}

/* アコーディオン見出し */
.accordion-title {
    color: #fff;
    background-color: rgb(80, 113, 191);
    cursor: pointer;
}
.accordion-title::before {
    content: '+';
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
}
.accordion-title.open::before {
    content: '-';
}

/* アコーディオンコンテンツ */
.accordion-content {
    display: none;
    background-color: rgb(218, 226, 240);
}
</style>

jQuery記述

jQueryCDN 最新版などは公式サイトをご確認ください。

jQueryを<script>~</script>または自作jsの中に記述します。

<script>
$(document).ready(function () {
    // アコーディオンタイトルをクリックした際の動作
    $('.accordion-title').click(function () {
        // アコーディオンの開閉を切り替える
        $(this).toggleClass('open').next('.accordion-content').slideToggle();
    });
  });
</script>