jQueryで要素を開閉させる「もっと見る」ボタン(アコーディオン)の作り方

「jQueryで要素を開閉させる「もっと見る」ボタン(アコーディオン)の作り方」の画像です。

今回はWEBサイトで良く見かけるjQueryで要素を開閉させる「もっと見る」ボタン(アコーディオン)の作り方を備忘録も兼ねて簡単にまとめました。
開閉時にボタン部分のアイコンが「+」と「-」に切り替わりながら開閉する一番シンプルな表示・処理での作り方になります。

簡単な説明になりますが良ければ参考にしてみて頂けたら幸いです!

目次

要素を開閉させる「もっと見る」ボタン(アコーディオン)を作るには?

まずは土台となるHTMLを記述していきます。

その後、土台(HTML)を記述できたらその土台をもとにCSSで装飾やボタンの「+、-」部分などを指定し、jQueryで「もっと見る」(アコーディオン)ボタンが押し下しされた時の動作(処理)を記述していきます。

HTMLを記述していこう

下記のように土台となるHTMLを記述します。

class名やタグの種類などは別のものでも装飾を自身でできる際は大丈夫です!
ただ、class名js-accordionButtonは最初にjsと書かれている通り、後から「jQuery」で使用するのでこちらで変更した際は「jQuery」側のclass名も同じ箇所を変更するようご注意ください。

classはできるだけ「CSS」で使用するclass名と「JavaScript・jQuery」で使用するclass名とで分けて使い、分かりやすいように「JavaScript・jQuery」で使うclass名には先頭にjs-のような感じのclass名をつけた方がいいかと思います!

<div class="accordion">
  <div class="accordion__button js-accordionButton">
    <p class="accordion__buttonText">アコーディオンボタン</p>
    <span class="accordion__buttonIcon"></span>
  </div>
  <div class="accordion__content">
    <p class="accordion__text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
</div>

CSSで装飾してボタンや開閉コンテンツ部分の見た目を作ろう

土台となるHTMLが記述できたら次は土台をもとにCSSで下記のように記述して装飾をし、「もっと見る」(アコーディオン)ボタンや開閉コンテンツ部分のデザインを形作っていきます。

装飾が正常にできたらデモページと同様に開閉時のボタンやコンテンツ部分のデザイン、開閉した時の「+、-」部分のアニメーション動作になります。

/*--------------------
 accordion
--------------------*/
.accordion {
  width: 500px;
  margin: 50px auto;
}

.accordion__button {
  position: relative;
  width: 100%;
  height: auto;
  text-align: left;
  border: 1px solid #202f55;
  background-color: rgba(32, 47, 85, .03);
  box-sizing: border-box;
  cursor: pointer;
}

.accordion__buttonText {
  color: #333333;
  font-size: 18px;
  line-height: 1.4;
  padding: 20px 40px 20px 20px;
}

.accordion__buttonIcon {
  display: block;
  position: absolute;
  right: 15px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translatey(-50%);
}

.accordion__buttonIcon::before,
.accordion__buttonIcon::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 2px;
  background-color: #333333;
  transform: translate(-50%, -50%);
  transition: transform 0.4s ease 0s;
}

.accordion__buttonIcon::before {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* is-open時の切り替え(+、-) */
.accordion__button.is-open .accordion__buttonIcon::before {
  transform: translate(-50%, -50%) rotate(0deg);
}

.accordion__content {
  display: none;
  border-color: #202f55;
  border-style: solid;
  border-width: 0 1px 1px 1px;
  background-color: rgba(32, 47, 85, .03);
  padding: 20px;
  box-sizing: border-box;
}

.accordion__text {
  color: #333333;
  font-size: 15px;
  line-height: 1.6;
}

各指定箇所の簡単な説明

簡単に説明しますとまずは下記大枠の部分、class名accordionに全体の横幅を指定し、次にボタン部分の見た目をclass名accordion__button部分に追記しています。

その後、class名accordion__buttonTextにテキストのサイズやテキスト左右上下の余白のstyleを追加し、ボタンの用に見えるよう指定していきます。

こちらでボタン部分の大枠の見た目は完成です。
慣れてきたら、自身なりに修正してみて色んなパターンのボタンデザインを作ってみましょう!

.accordion {
  width: 500px;
  margin: 50px auto;
}

.accordion__button {
  position: relative;
  width: 100%;
  height: auto;
  text-align: left;
  border: 1px solid #202f55;
  background-color: rgba(32, 47, 85, .03);
  box-sizing: border-box;
  cursor: pointer;
}

.accordion__buttonText {
  color: #333333;
  font-size: 18px;
  line-height: 1.4;
  padding: 20px 40px 20px 20px;
}

そして、よくありがちな「開閉ボタン」を押し下し時に開閉と同時にアニメーションで「+、-」が変化するよう下記のようにclass名accordion__buttonIconに対し、まずは「+、ー」の箱となる部分を下記のように記述し、その後CSSの擬似要素::before::afterに「+、-」用のstyleを指定していきます。

擬似要素::before::afterはほぼ同様の指定がされていて、片方のみtransformrotate(90deg)を指定して90度回転させて「+」の状態を作っています。

.accordion__buttonIcon {
  display: block;
  position: absolute;
  right: 15px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translatey(-50%);
}

.accordion__buttonIcon::before,
.accordion__buttonIcon::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 2px;
  background-color: #333333;
  transform: translate(-50%, -50%);
  transition: transform 0.4s ease 0s;
}

.accordion__buttonIcon::before {
  transform: translate(-50%, -50%) rotate(90deg);
}

その後、jQueryでis-openのclassが追加された際に下記の「コメントアウト」部分に書いているように、class名accordion__buttonis-openが追加された時、class名accordion__buttonIconの擬似要素::beforetransformの値を「-」になるようrotate(0deg)と0度の状態になるようstyleを追加し、開いた時にアイコン部分が切り替わり「-」になるよう指定していきます。

/* is-open時の切り替え(+、-) */
.accordion__button.is-open .accordion__buttonIcon::before {
  transform: translate(-50%, -50%) rotate(0deg);
}

その後、下記の「開閉コンテンツ」部分、class名accordion__contentを「開閉ボタン」と関係性があるようわかりやすい見た目になるようstyleを追加し、class名accordion__textもテキストのフォントサイズなどよく見えるよう指定していきます。

こちらで「もっと見る」(アコーディオン)ボタンや開閉コンテンツ部分のデザインの装飾は完了です。

これはあくまでシンプルな見た目なので自身なりにページ毎のデザインに合うよう装飾をカスタマイズしてみてください!
テンプレ的な感じで使っていただけると幸いです。

.accordion__content {
  display: none;
  border-color: #202f55;
  border-style: solid;
  border-width: 0 1px 1px 1px;
  background-color: rgba(32, 47, 85, .03);
  padding: 20px;
  box-sizing: border-box;
}

.accordion__text {
  color: #333333;
  font-size: 15px;
  line-height: 1.6;
}

jQueryを記述して開閉処理を追加しよう

CSSでの装飾により開閉ボタンや開閉コンテンツ部分の見た目はできたもののそれだけでは開閉ボタンを押し下ししても何も動作しません。

そこでjQueryで開閉ボタンを押し下しした際に実行したい動作(処理)を追加して開閉コンテンツが開閉し、同時にアイコン部分が「+、-」に変化するような処理を下記のように記述し、追加していきます。

// Accordion button
$(function () {
  $('.js-accordionButton').click(function () {
    $(this).next('.accordion__content').slideToggle(); // アコーディオンボタン要素の次にあるコンテンツを開閉する
    $(this).toggleClass('is-open'); // アコーディオンボタン要素にclassを追加する
  });
});

処理内容の簡単な説明

下記ハイライト部分はclass名js-accordionButtonがクリック(押し下し)されたらjQuery記述の最後に書いてある});までの間に書かれている処理を実行してくださいというような内容です。

$(function () {
  $('.js-accordionButton').click(function () {
    $(this).next('.accordion__content').slideToggle(); // アコーディオンボタン要素の次にあるコンテンツを開閉する
    $(this).toggleClass('is-open'); // アコーディオンボタン要素にclassを追加する
  });
});

そして指定された要素がクリック(押し下し)された時に下記ハイライト部分の処理が実行されクリック(押し下し)された要素の次のclass名accordion__contentの要素をslideToggleというメソッドで非表示にされている要素を表示させる様に記述しています。

$(function () {
  $('.js-accordionButton').click(function () {
    $(this).next('.accordion__content').slideToggle(); // アコーディオンボタン要素の次にあるコンテンツを開閉する
    $(this).toggleClass('is-open'); // アコーディオンボタン要素にclassを追加する
  });
});

※今回の処理内容ですと開閉ボタンと開閉コンテンツは隣接要素である必要がありますのでご注意を!(同じ階層で開閉ボタンの次に開閉コンテンツの要素がないといけないと言うような意味です)

そしてその次に書かれている下記ハイライト部分でクリック(押し下し)された要素に対し、toggleClassというメソッドでclass名is-openを追加したり削除したりするように記述しております。

$(function () {
  $('.js-accordionButton').click(function () {
    $(this).next('.accordion__content').slideToggle(); // アコーディオンボタン要素の次にあるコンテンツを開閉する
    $(this).toggleClass('is-open'); // アコーディオンボタン要素にclassを追加する
  });
});

注意

jQueryが動作しないけどなんでだろうという時はまずjQueryが読み込まれているか確認してください。

読み込まれていない場合は公式サイトからダウンロードしてサイトに追加して読み込むか、CDN経由でjQueryライブラリを読み込ませましょう。

CDN経由の場合は実行させたい今回記述したjQueryより前の箇所に下記コードのように(jQuery CDN公式サイトより引用)追記しましょう。

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
jQuery公式サイト
各種CDNの公式サイト

まとめ

今回は「jQueryで要素を開閉させる「もっと見る」ボタン(アコーディオン)の作り方」について簡単にはなりますが、HTML・CSS・jQueryでの作り方を説明させていただきました!

「slideToggle」や「toggleClass」などのメソッドもでてきたので、知らなかった方やもっと詳しく知りたいという方は下記の外部サイトが参考になるかなと思いますので参考にしてみてください。

参考サイト

slideToggle()

toggleClass()

デモページ

デモページはこちらになります。

See the Pen 「もっと見る」ボタン(アコーディオン)の作り方 by hiroyuki.miyauchi (@hiromiya) on CodePen.

※各言語ボタンを押し下し、ソースコードをLIVE(リアルタイム)で書き換えて表示・実行結果を確認できます。

最後にもう一度ポイントをおさらい

  • 「CSS」で使用するclass名と「JavaScript・jQuery」で使用するclass名は別に分けて使いわけよう
  • 開閉ボタンや開閉コンテンツ部分は自身で装飾できるならどんなデザインでもOKなのでカスタマイズしたり自身で作成してみよう
  • 「開閉コンテンツ」部分を表示・非表示したい時は「slideToggle」メソッドを上手く活用しよう
  • 開閉時にボタン部分に変化をさせたい時は、「toggleClass」メソッドを使ってclassの状態変化でCSS指定でstyleを変化させて状態を変更しよう
  • CSSを追加するメソッドもありますが、なるべくCSSでできることはCSSで指定する様にしましょう

初心者向けで簡単な説明でしたが上記内容も踏まえまして、是非自身でのプログラミングにも役立てて頂けると幸いです。

初心者の方にオススメの学習サービス

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


PAGE TOP
  • MENU
  • HOME
  • PAGE TOP
  • SIDE BAR