【JS】任意の箇所をクリックしたら隠れている要素が表示される「アコーディオンパネル」の作り方

今回は、任意の箇所をクリックしたら隠れている要素が表示される「アコーディオンパネル」の作り方について紹介します。

質問形式のアコーディオンパネルにも使えるので、是非参考にしてください。

【JS】任意の箇所をクリックしたら隠れている要素が表示される「アコーディオンパネル」の作り方

完成形はこちらです。

See the Pen
Untitled
by webis (@webis-co)
on CodePen.

コピペでも動きます。

HTML

ulタグであるaccordion-itemsの中に、accordion-itemを3つ用意しました。

質問タイトルやそれに対する答えのテキストは自由に変えてみてください。

そして今回はFont Awesomeアイコンを使うので、Font AwesomeのCDNコードをheadタグの中に記述しておきましょう。

CSS

タイトルテキストをクリックしたら表示されるaccordion-boxを、通常は消しておきます。

クリックしたらaccordion-boxが表示されるように、後でJavaScriptでコードを書いていきます。

そして、closeクラスがついたら下向きのFont Awesomeアイコンを上向きのアイコンに変わるようにしました。

closeクラスも後でJavaScriptで書いていきます。

JavaScript

今回はjQueryを使うので、以下のjQueryのCDNコードをbodyの閉じタグ付近に記述しましょう。

そして、JavaScriptコードはこちら。

タイトルであるaccordion-titleをクリックすると、それまで非表示だったaccordion-boxが表示されるようにしました。

そしてcloseクラスが付与され、もう一度クリックしたらcloseが外れます。

そうすることで、先ほどCSSで指定したFont Awesomeアイコンが下向きや上向きのアイコンに変更します。

まとめ

以上が、任意の箇所をクリックしたら隠れている要素が表示される「アコーディオンパネル」の作り方でした。

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事