jQueryで要素を開閉させ、「もっと見る・閉じる」を切り替え可能な開閉コンテンツ(アコーディオン)の作り方jQueryで要素を開閉させ、「もっと見る・閉じる」を切り替え可能な開閉コンテンツ(アコーディオン)の作り方プログラミング2022年08月28日Tweetシェア今回はWEBサイトで良く見かけるjQueryで要素を開閉させ、「もっと見る・閉じる」を切り替え可能な開閉コンテンツ(アコーディオン)の作り方を備忘録も兼ねて簡単にまとめました。開閉時にボタン部分のテキストが「もっと見る」と「閉じる」に切り替わる処理での作り方になります。要素を開閉させ、「もっと見る・閉じる」を切り替え可能な開閉コンテンツを作るには?HTMLを記述していこうCSSで装飾してボタンやコンテンツ部分の見た目を作ろう各指定箇所の簡単な説明jQueryを記述して開閉処理を追加しよう処理内容の簡単な説明まとめ参考サイトデモページ最後にもう一度ポイントをおさらい要素を開閉させ、「もっと見る・閉じる」を切り替え可能な開閉コンテンツを作るには?まずは土台となるHTMLを記述していきます。その後、土台(HTML)を記述できたらその土台をもとにCSSで装飾やボタンの「もっと見る・閉じる」切り替え部分などを指定し、jQueryで「もっと見る」ボタンが押し下しされた時の動作(処理)を記述していきます。HTMLを記述していこう下記のように土台となるHTMLを記述します。class名やタグの種類などは別のものでも装飾を自身でできる際は大丈夫です!ただ、class名js-accordionButtonなど最初にjsと書かれているclassは最初にjsと書かれている通り、後から「jQuery」で使用するのでこちらで変更した際は「jQuery」側のclass名も同じ箇所を変更するようご注意ください。class="accordion__text">ここにデフォルトで表示するテキストを入力します。js-accordionMoreContent">ここに「もっと見る」ボタンをクリックで表示するテキストを入力します。-->CSSで装飾してボタンやコンテンツ部分の見た目を作ろう土台となるHTMLが記述できたら次は土台をもとにCSSで下記のように記述して装飾をし、「もっと見る・閉じる」の切り替えや開閉コンテンツ部分の「is-active時(展開時)の切り替え」用の指定をしその他必要なデザインを形作っていきます。装飾が正常にできたらデモページと同様に開閉時のボタンやコンテンツ部分のデザイン、開閉した時の「もっと見る・閉じる」部分の表示切り替え、開閉時の動作になります。簡単に説明しますとまずは下記大枠の部分、class名accordionに全体の横幅を指定し、class名accordion__titleにアコーディオンコンテンツのタイトル部分、class名accordion__titleTextにタイトルのテキストのフォントサイズや行間などの指定、class名accordion__contentにアコーディオンコンテンツ部分の装飾を追記しています。その後にある下記class名accordion__accordionMoreContent部分は初期表示時に非表示にしておきたい要素に対して下記classを記述することによって非表示になるようをclassを用意し、class名accordion__textにアコーディオンコンテンツのテキストフォントサイズや行間などを指定し、記述しています。1.6;}そして、その後にある下記class名accordion__button部分にアコーディオンボタン部分の指定をし、は初期表示時に非表示にしておきたい要素に対して下記classを記述することによって非表示になるようをclassを用意し記述しています。class名accordion__buttonの擬似要素::beforeにborderで「四角の半分のL字」を再現し135度回転させて下向きの「くの字」のような「L字」のアイコンを作っています。下記最後のclass名accordion__buttonTextにはフォントサイズや行間などの指定をしています。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-activeclassが付与されている方のみ表示されるように指定しclassを準備しています。簡単にはなりますがCSSの各指定箇所の簡単な説明は以上になります。block;}jQueryを記述して開閉処理を追加しようCSSでの装飾により開閉ボタンやアコーディオンコンテンツ部分の見た目はできたもののそれだけでは開閉ボタンを押し下ししても何も動作しません。そこでjQueryで開閉ボタンを押し下しした際に実行したい動作(処理)を追加して開閉コンテンツが開閉し、同時にアイコン部分、ボタンテキストが「もっと見る・閉じる」で切り替え変化するような処理を下記のように記述し、追加していきます。下記ハイライト部分に下記コメントに書いているように「各セレクタの取得・各種設定の値等指定」を設定しています。基本はHTML側のclass名をもしも変更したい場合はHTML側で変更した内容と同一の箇所を同じclass名に修正してください。el.isActiveの部分はCSSでis-active時に切り替えなどをする為に用意したclass名と同一のものを指定する必要がありますのでCSS側も違うclassにした場合はこちらを同一のclass名に修正してください。});});そして下記ハイライト部分がコメントアウトに書いてあります通り、「アコーディオン開閉処理」になります。「各セレクタの取得・各種設定の値等指定」に設定したセレクタ・各種設定値を元に各処理を記述しております。詳細はコメントアウトに書いておりますのでそちらを参照してください。簡単になりますが以上でjQueryでの処理内容の簡単な説明になります。});});※今回の処理内容ですと「js-accordion」の子孫要素に開閉コンテンツや開閉ボタンのclassがある前提で処理を記述しておりますので、HTMLに記載の1セットの構造単位で複数展開するように注意してください(構造が異なる複数展開をすると機能しなくなります)注意jQueryが動作しないけどなんでだろうという時はまずjQueryが読み込まれているか確認してください。読み込まれていない場合は公式サイトからダウンロードしてサイトに追加して読み込むか、CDN経由でjQueryライブラリを読み込ませましょう。CDN公式サイトより引用)追記しましょう。applications.https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview#jQuery_Releases_on_the_CDN_0まとめ今回は「jQueryで要素を開閉させ、「もっと見る・閉じる」を切り替え可能な開閉コンテンツ(アコーディオン)の作り方」について簡単にはなりますが、HTML・CSS・jQueryでの作り方を説明させていただきました!「slideToggle」や「toggleClass」などのメソッドもでてきたので、知らなかった方やもっと詳しく知りたいという方は下記の外部サイトが参考になるかなと思いますので参考にしてみてください。STUDIOスライドダウンとスライドアップのアニメーションで、要素の表示・非表示を切り替えます。TechAcademyマガジンプログラミング初心者向けに、jQueryのtoggleメソッドを使って要素の表示・非表示を切り替える方法について解説しています。Webサイトを作成する上で必要になってくる知識なので、今すぐ理解しておきましょう。STUDIO指定したclassのオン(設定)、オフ(削除)の切り替えを行います。https://js.studio-kingdom.com/jquery/attributes/toggle_classhttps://stand-4u.com/web/javascript/jquery-toggleclass.htmlデモページデモページはこちらになります。CodePen.※各言語ボタンを押し下し、ソースコードをLIVE(リアルタイム)で書き換えて表示・実行結果を確認できます。最後にもう一度ポイントをおさらい「CSS」で使用するclass名と「JavaScript・jQuery」で使用するclass名は別に分けて使いわけよう開閉ボタンや開閉コンテンツ部分は自身で装飾できるならどんなデザインでもOKなのでカスタマイズしたり自身で作成してみよう「開閉コンテンツ」部分を表示・非表示したい時は「slideToggle」メソッドを上手く活用しよう開閉時にボタン部分に変化をさせたい時は、「toggleClass」メソッドを使ってclassの状態変化でCSS指定でstyleを変化させて状態を変更しようCSSを追加するメソッドもありますが、なるべくCSSでできることはCSSで指定する様にしましょう初心者向けで簡単な説明でしたが上記内容も踏まえまして、是非自身でのプログラミングにも役立てて頂けると幸いです。コメントをキャンセルメールアドレスが公開されることはありません。上に表示された文字を入力してください。