【jQuery】初心者でも簡単! アコーディオン機能の実装方法を解説します。

JavaScript Web制作

【jQuery】初心者でも簡単!アコーディオン機能の実装方法を解説します。

なやむくん
アコーディオンの作り方がわからない
なやむさん
どのように表示させているか仕組みを知りたい

などの疑問や悩みを解決してまいります。

Q&Aや問題集などによく使用されるアコーディオン機能ですが、実装が難しいと思っていませんか。

しかし、コードを紐解いて確認してみると仕組みはシンプルです。

この記事では初心者や苦手意識がある方でも簡単に実装できる方法をわかりやすく解説します。

アコーディオンの完成例

以下完成例です。

See the Pen アコーディオン by koutarou mori (@koutarou-mori) on CodePen.

コードを見ていただくとわかるのですが、とても短いですよね。(CSSはデザイン部分なので個人差ありますが…)

この短いコードだけで簡単にアコーディオンを実装することが可能なのです。

なので初心者の方も苦手意識がある方も大丈夫ですのでそれぞれのコードを見て仕組みを理解していきましょう!

HTMLの解説

コードは以下のようになっています。

<body>
  <div class="accordion">
    <p class="accordionTitle">タイトルが入ります。</p>
    <p class="accordionText">テキストが入ります。</p>
  </div><!-- /.accordion -->
    <div class="accordion">
    <p class="accordionTitle">タイトルが入ります。</p>
    <p class="accordionText">テキストが入ります。</p>
  </div><!-- /.accordion -->
</body>

まずアコーディオンは要素をクリックするとクリックした要素の下に、別の要素が表示されるという仕組みになっています。

なので上記コードではaccordionTitleクラスをクリックすると、accordionTextクラスが表示されるというようにしています。

みつた
HTMLでは以上2点の要素を用意するだけで問題ありません。

ポイント

〇 クリック用の要素と、クリックしたら表示される用の要素の2つを用意する

CSSの解説

コードは以下のようになっています。

/* リセットCSS */
body {
    box-sizing: border-box;
}
div,p {
    box-sizing: border-box;
    margin: 0;
}
/* アコーディオン全体 */
.accordion {
    width: 100%;
    max-width: 1000px;
    margin: 20px auto 0;
    border: 1px solid #303030;
}
/* title部分 */
.accordionTitle {
    width: 100%;
    background-color: #303030;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
}
/* text部分 */
.accordionText {
    display: none;
    width: 100%;
    padding: 15px 20px;
    font-size: 16px;
    color: #303030;
    background-color: #eee;
}

CSSは必須なコードというものはないのですが、クリックできるということをユーザーに伝えるためcursor: pointer;を指定しましょう。

みつた
クリックができる要素にはcursorプロパティの指定を意識しましょう!

JS(jQuery)の解説

コードは以下のようになっています。

$(function () {
  $('.accordionTitle').on('click',function () {
      $(this).next().slideToggle();
  })
});

JS(jQuery)のコードはこれだけです。

$('.accordionTitle').on('click',function () {は、accordionTitleクラスをクリックすると…の部分になります。

$(this).next().slideToggle();は、クリックした要素の次の要素をスライドで表示させるという意味があります。

みつた
上記2点が理解できればアコーディオンはマスターです!

ポイント

$(○○).on('click',function () {は、○○をクリックすると…の部分

$(this).next().slideToggle();は、該当要素の次の要素をスライドで表示させる部分

【オススメ】開閉の状態をわかりやすくしたアコーディオンの完成例

アコーディオンの開閉切り替えをさらにユーザーにわかりやすく伝えることで、UIを意識したより機能的なアコーディオンを作ることが可能です。

以下はアコーディオンが閉じているときは「+」、開いているときは「-」を要素の右側に表示しています。

See the Pen アコーディオン【+-仕様】 by koutarou mori (@koutarou-mori) on CodePen.

追加したコードをピックアップして解説していきます。

CSSの解説

CSSで追加したコードは以下です。

/* title部分 */
.accordionTitle {
    position: relative; /* 追加 */
    width: 100%;
    background-color: #303030;
    padding: 20px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
}
/* 追加 */
.accordionTitle::before {
    position: absolute;
    content: '';
    top: 50%;
    right: 25px;
    transform: translateY(-50%) rotate(0);
    width: 2px;
    height: 20px;
    background-color: #fff;
    transition: all .5s;
}
/* 追加 */
.accordionTitle.active::before {
    transform: translateY(-50%) rotate(90deg);
}
/* 追加 */
.accordionTitle::after {
    position: absolute;
    content: '';
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 20px;
    height: 2px;
    background-color: #fff;
}

追加したコードの内容は主に疑似要素を使って「+」「-」の実装です。

また今回は、クリックするとそのクリックした要素にactiveクラスを追加するようにしています。

このactiveクラスを追加させることによって「+」の縦の線を横にして、「+」の横線と重ねて「-」に見せています

みつた
縦線を表示している疑似要素にtransitionプロパティを指定することで動きが滑らかになりますよ!

ポイント

〇 「+」「-」は疑似要素で作成する

〇 activeクラスの追加で「+」から「-」に変化させている

〇 transitionプロパティを指定することで「+」の縦線を横にするときの動きが滑らかになる

JS(jQuery)の解説

JS(jQuery)では一文追加しています。

$(function () {
  $('.accordionTitle').on('click',function () {
      $(this).toggleClass('active'); // 追加
      $(this).next().slideToggle();
  })
});

先程のCSSの解説でもありましたが、「+」から「-」に変化させるのはactiveクラスを追加して変化させています。

なので$(this).toggleClass('active');とは、accordionTitleクラスがクリックされたら、そのクリックしたaccordionTitleクラスに対してactiveクラスを追加するという意味のコードになります。

ポイント

$(this).toggleClass('active');は、該当要素に対してactiveクラスを追加するコード

  • この記事を書いた人
  • 最新記事

みつた

完全未経験&異業種から30歳の年でIT企業に転職。

Web系開発言語が好き。
どちらかというとバックエンドよりもフロントエンドが好き(現時点では…)

最近はサウナと観葉植物にハマっている。
野球が好きで一応投手。

-JavaScript, Web制作