jQueryで要素を開閉させ、「もっと見る・閉じる」を切り替え可能な開閉コンテンツ(アコーディオン)の作り方
今回はWEBサイトで良く見かけるjQueryで要素を開閉させ、「もっと見る・閉じる」を切り替え可能な開閉コンテンツ(アコーディオン)の作り方を備忘録も兼ねて簡単にまとめました。
開閉時にボタン部分のテキストが「もっと見る」と「閉じる」に切り替わる処理での作り方になります。
コンテンツ1セット単位で処理されるようにしているので1セットで必要な要素・classをちゃんと記述すれば複数アコーディオンがあっても大丈夫です!
簡単な説明になりますが良ければ参考にしてみて頂けたら幸いです!
目次
- 要素を開閉させ、「もっと見る・閉じる」を切り替え可能な開閉コンテンツを作るには?
- HTMLを記述していこう
- CSSで装飾してボタンやコンテンツ部分の見た目を作ろう
- jQueryを記述して開閉処理を追加しよう
- まとめ
要素を開閉させ、「もっと見る・閉じる」を切り替え可能な開閉コンテンツを作るには?
まずは土台となるHTMLを記述していきます。
その後、土台(HTML)を記述できたらその土台をもとにCSSで装飾やボタンの「もっと見る・閉じる」切り替え部分などを指定し、jQueryで「もっと見る」ボタンが押し下しされた時の動作(処理)を記述していきます。
HTMLを記述していこう
下記のように土台となるHTMLを記述します。
class名やタグの種類などは別のものでも装飾を自身でできる際は大丈夫です!
ただ、class名js-accordionButton
など最初にjs
と書かれているclassは最初にjs
と書かれている通り、後から「jQuery」で使用するのでこちらで変更した際は「jQuery」側のclass名も同じ箇所を変更するようご注意ください。
classはできるだけ「CSS」で使用するclass名と「JavaScript・jQuery」で使用するclass名とで分けて使い、分かりやすいように「JavaScript・jQuery」で使うclass名には先頭にjs-
のような感じのclass名をつけた方がいいかと思います!
下記が1セットになりますので複数アコーディオンが必要な場合は下記をコピー&ペーストして中身などを差し替える等して活用してください!
※開閉ボタンテキスト「もっと見る・閉じる」は変更しやすいようあえてHTMLで記述しHTML知識があれば修正できるように作成しておりますので修正したい場合はHTMLのテキストを修正してみてください(テキスト量は1行想定ですので2行以上になる場合はCSSも調整してください)
<div class="accordion js-accordion">
<div class="accordion__title">
<p class="accordion__titleText">アコーディオンタイトル</p>
</div>
<div class="accordion__content">
<p class="accordion__text">ここにデフォルトで表示するテキストを入力します。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p class="accordion__text accordion__accordionMoreContent js-accordionMoreContent">ここに「もっと見る」ボタンをクリックで表示するテキストを入力します。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<div class="accordion__button js-accordionButton">
<p class="accordion__buttonText is-active js-accordionButtonText">もっと見る</p>
<p class="accordion__buttonText js-accordionButtonText">閉じる</p>
</div>
</div>
</div><!-- /.accordion -->
CSSで装飾してボタンやコンテンツ部分の見た目を作ろう
土台となるHTMLが記述できたら次は土台をもとにCSSで下記のように記述して装飾をし、「もっと見る・閉じる」の切り替えや開閉コンテンツ部分の「is-active時(展開時)の切り替え」用の指定をしその他必要なデザインを形作っていきます。
装飾が正常にできたらデモページと同様に開閉時のボタンやコンテンツ部分のデザイン、開閉した時の「もっと見る・閉じる」部分の表示切り替え、開閉時の動作になります。
/*--------------------
accordion
--------------------*/
.accordion {
width: 500px;
margin: 50px auto;
}
.accordion__title {
position: relative;
width: 100%;
height: auto;
text-align: left;
border: 1px solid #202f55;
background-color: rgba(32, 47, 85, .03);
box-sizing: border-box;
}
.accordion__titleText {
color: #333333;
font-size: 18px;
line-height: 1.4;
padding: 20px 40px 20px 20px;
}
.accordion__content {
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__accordionMoreContent {
display: none;
}
.accordion__text {
color: #333333;
font-size: 15px;
line-height: 1.6;
}
.accordion__button {
position: relative;
display: block;
width: 100%;
height: auto;
margin-top: 10px;
cursor: pointer;
}
.accordion__button::before {
content: "";
position: absolute;
top: 50%;
right: 15px;
width: 10px;
height: 10px;
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
transform: rotate(135deg);
margin-top: -8px;
}
.accordion__buttonText {
display: none;
color: #ffffff;
font-size: 15px;
line-height: 26px;
text-align: center;
text-decoration: none;
background-color: #202f55;
border-radius: 10px;
transition: opacity 0.3s ease 0s;
padding: 12px 30px;
box-sizing: border-box;
}
/* is-active時(展開時)の切り替え */
.accordion__button.is-active::before {
transform: rotate(-45deg);
margin-top: -2px;
}
.accordion__buttonText.is-active {
display: block;
}
各指定箇所の簡単な説明
簡単に説明しますとまずは下記大枠の部分、class名accordion
に全体の横幅を指定し、class名accordion__title
にアコーディオンコンテンツのタイトル部分、class名accordion__titleText
にタイトルのテキストのフォントサイズや行間などの指定、class名accordion__content
にアコーディオンコンテンツ部分の装飾を追記しています。
その後にある下記class名accordion__accordionMoreContent
部分は初期表示時に非表示にしておきたい要素に対して下記classを記述することによって非表示になるようをclassを用意し、class名accordion__text
にアコーディオンコンテンツのテキストフォントサイズや行間などを指定し、記述しています。
/*--------------------
accordion
--------------------*/
.accordion {
width: 500px;
margin: 50px auto;
}
.accordion__title {
position: relative;
width: 100%;
height: auto;
text-align: left;
border: 1px solid #202f55;
background-color: rgba(32, 47, 85, .03);
box-sizing: border-box;
}
.accordion__titleText {
color: #333333;
font-size: 18px;
line-height: 1.4;
padding: 20px 40px 20px 20px;
}
.accordion__content {
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__accordionMoreContent {
display: none;
}
.accordion__text {
color: #333333;
font-size: 15px;
line-height: 1.6;
}
そして、その後にある下記class名accordion__button
部分にアコーディオンボタン部分の指定をし、は初期表示時に非表示にしておきたい要素に対して下記classを記述することによって非表示になるようをclassを用意し記述しています。
class名accordion__button
の擬似要素::before
にborder
で「四角の半分のL字」を再現し135度回転させて下向きの「くの字」のような「L字」のアイコンを作っています。
下記最後のclass名accordion__buttonText
にはフォントサイズや行間などの指定をしています。
.accordion__button {
position: relative;
display: block;
width: 100%;
height: auto;
margin-top: 10px;
cursor: pointer;
}
.accordion__button::before {
content: "";
position: absolute;
top: 50%;
right: 15px;
width: 10px;
height: 10px;
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
transform: rotate(135deg);
margin-top: -8px;
}
.accordion__buttonText {
display: none;
color: #ffffff;
font-size: 15px;
line-height: 26px;
text-align: center;
text-decoration: none;
background-color: #202f55;
border-radius: 10px;
transition: opacity 0.3s ease 0s;
padding: 12px 30px;
box-sizing: border-box;
}
その後、jQueryでis-active
のclassが追加された際に下記の「コメントアウト」部分に書いているように、class名accordion__button
にis-active
が追加された時、class名accordion__button
の擬似要素::before
のtransform
の値を上向きの「くの字」のような「L字」のアイコンになるようrotate(-45deg)
と–45度の状態になるようstyle
を追加し、開閉時にボタンテキスト部分が切り替わるようclass名accordion__buttonText
にis-active
classが付与されている方のみ表示されるように指定しclassを準備しています。
簡単にはなりますがCSSの各指定箇所の簡単な説明は以上になります。
/* is-active時(展開時)の切り替え */
.accordion__button.is-active::before {
transform: rotate(-45deg);
margin-top: -2px;
}
.accordion__buttonText.is-active {
display: block;
}
jQueryを記述して開閉処理を追加しよう
CSSでの装飾により開閉ボタンやアコーディオンコンテンツ部分の見た目はできたもののそれだけでは開閉ボタンを押し下ししても何も動作しません。
そこでjQueryで開閉ボタンを押し下しした際に実行したい動作(処理)を追加して開閉コンテンツが開閉し、同時にアイコン部分、ボタンテキストが「もっと見る・閉じる」で切り替え変化するような処理を下記のように記述し、追加していきます。
// Accordion
$(function () {
let el = {}; // 配列・変数用(巻き上げ防止の為、冒頭にて宣言)
// 各セレクタの取得・各種設定の値等指定
el.accordion = '.js-accordion'; // アコーディオンコンテンツ全体のセレクタの取得
el.accordionMoreContent = '.js-accordionMoreContent'; // アコーディオン開閉コンテンツのセレクタの取得
el.accordionButton = '.js-accordionButton'; // アコーディオンボタンのセレクタの取得
el.accordionButtonText = '.js-accordionButtonText'; // アコーディオンボタンテキストのセレクタ取得
el.isActive = 'is-active'; // アコーディオン展開時(アクティブ時)の付与するclass名を指定
el.slideSpeed = 500; // アコーディオン展開時(アクティブ時)の開閉速度(単位:ms)を指定
// アコーディオン開閉処理
$(el.accordionButton).on('click', function () {
$(this).parents(el.accordion).find(el.accordionMoreContent).slideToggle(el.slideSpeed); // アコーディオンボタン要素の親要素のアコーディオンコンテンツ内にある開閉コンテンツを開閉する
$(this).toggleClass(el.isActive); // アコーディオンボタン要素にclassを追加・削除する
$(this).parents(el.accordion).find(el.accordionButtonText).toggleClass(el.isActive); // アコーディオンボタンテキスト要素にclassを追加・削除する
});
});
処理内容の簡単な説明
下記ハイライト部分に下記コメントに書いているように「各セレクタの取得・各種設定の値等指定」を設定しています。
基本はHTML側のclass名をもしも変更したい場合はHTML側で変更した内容と同一の箇所を同じclass名に修正してください。
また、el.isActive
の部分はCSSでis-active
時に切り替えなどをする為に用意したclass名と同一のものを指定する必要がありますのでCSS側も違うclassにした場合はこちらを同一のclass名に修正してください。
el.slideSpeed
に指定の数値はコメントアウトに書いております通り、アコーディオン開閉時の開閉速度(スピード)を指定しているので遅くしたい場合は「1000」に早くしたい場合は「300」など修正して調整してみてください!
// Accordion
$(function () {
let el = {}; // 配列・変数用(巻き上げ防止の為、冒頭にて宣言)
// 各セレクタの取得・各種設定の値等指定
el.accordion = '.js-accordion'; // アコーディオンコンテンツ全体のセレクタの取得
el.accordionMoreContent = '.js-accordionMoreContent'; // アコーディオン開閉コンテンツのセレクタの取得
el.accordionButton = '.js-accordionButton'; // アコーディオンボタンのセレクタの取得
el.accordionButtonText = '.js-accordionButtonText'; // アコーディオンボタンテキストのセレクタ取得
el.isActive = 'is-active'; // アコーディオン展開時(アクティブ時)の付与するclass名を指定
el.slideSpeed = 500; // アコーディオン展開時(アクティブ時)の開閉速度(単位:ms)を指定
// アコーディオン開閉処理
$(el.accordionButton).on('click', function () {
$(this).parents(el.accordion).find(el.accordionMoreContent).slideToggle(el.slideSpeed); // アコーディオンボタン要素の親要素のアコーディオンコンテンツ内にある開閉コンテンツを開閉する
$(this).toggleClass(el.isActive); // アコーディオンボタン要素にclassを追加・削除する
$(this).parents(el.accordion).find(el.accordionButtonText).toggleClass(el.isActive); // アコーディオンボタンテキスト要素にclassを追加・削除する
});
});
そして下記ハイライト部分がコメントアウトに書いてあります通り、「アコーディオン開閉処理」になります。
「各セレクタの取得・各種設定の値等指定」に設定したセレクタ・各種設定値を元に各処理を記述しております。
詳細はコメントアウトに書いておりますのでそちらを参照してください。
簡単になりますが以上でjQueryでの処理内容の簡単な説明になります。
※下記ハイライト部分は基本的にはjQueryをご自身で読み解き、理解できる方以外は修正せずにお使いください
知識なく修正すると動作しなくなる場合がありますのでご注意ください!
// Accordion
$(function () {
let el = {}; // 配列・変数用(巻き上げ防止の為、冒頭にて宣言)
// 各セレクタの取得・各種設定の値等指定
el.accordion = '.js-accordion'; // アコーディオンコンテンツ全体のセレクタの取得
el.accordionMoreContent = '.js-accordionMoreContent'; // アコーディオン開閉コンテンツのセレクタの取得
el.accordionButton = '.js-accordionButton'; // アコーディオンボタンのセレクタの取得
el.accordionButtonText = '.js-accordionButtonText'; // アコーディオンボタンテキストのセレクタ取得
el.isActive = 'is-active'; // アコーディオン展開時(アクティブ時)の付与するclass名を指定
el.slideSpeed = 500; // アコーディオン展開時(アクティブ時)の開閉速度(単位:ms)を指定
// アコーディオン開閉処理
$(el.accordionButton).on('click', function () {
$(this).parents(el.accordion).find(el.accordionMoreContent).slideToggle(el.slideSpeed); // アコーディオンボタン要素の親要素のアコーディオンコンテンツ内にある開閉コンテンツを開閉する
$(this).toggleClass(el.isActive); // アコーディオンボタン要素にclassを追加・削除する
$(this).parents(el.accordion).find(el.accordionButtonText).toggleClass(el.isActive); // アコーディオンボタンテキスト要素にclassを追加・削除する
});
});
※今回の処理内容ですと「js-accordion」の子孫要素に開閉コンテンツや開閉ボタンのclassがある前提で処理を記述しておりますので、HTMLに記載の1セットの構造単位で複数展開するように注意してください(構造が異なる複数展開をすると機能しなくなります)
注意
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で指定する様にしましょう
初心者向けで簡単な説明でしたが上記内容も踏まえまして、是非自身でのプログラミングにも役立てて頂けると幸いです。