コンテンツの表示非表示と同時にアイコンも切り替わるアコーディオンメニュー【Webサイト制作案件でよく使うサンプルコード】

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

HTML、CSS、jQueryを使い、シンプルなアコーディオンメニューを実装したい
クリックすると、コンテンツの表示非表示と同時にアイコンも切り替わるアコーディオンメニューの作り方が知りたい
コピペでOKな、アコーディオンメニューのコードを見たい

という方のお悩みを解決します！

今回紹介するコードは実際のWeb制作案件で使用したものに少し手を加えたものです。

アコーディオンはul、liタグで実装していて、奇数番目のliタグをクリックすると、初期状態で非表示にしていた偶数番目のliタグを表示させる、といった仕様となります。

おまけで、liタグの子要素としてimgタグで矢印アイコンを設置、こちらはクリックと同時にon、offの画像へ入れ替わります。

シンプルなアコーディオンメニューですが、Web制作案件で実装する機会が多いのでぜひ覚えましょう。

完成イメージ
カードデザインのサンプルコード
まとめ

完成イメージ

今回紹介するコードで実現できるアコーディオンメニューはこちら！

▼▼▼

一度はWebサイトで見かけたことがあるデザインではないでしょうか。

最初に隠れているコンテンツには上下左右余白をつけているのが特徴です。

そうすることでメリハリがついて読みやすくなる効果を発揮しています。

以下で紹介するコードをお使いいただければ、とりあえず見た目だけは秒で再現できます！

それでは見ていきましょう〜

カードデザインのサンプルコード

こちら、CodePenで作った見本です！

この画面だと本来のPCサイズで表示されないので、ぜひCodePenのページへ行って確かめてみていただきたいでありんす。

See the Pen
gOPzOWJ by 石森裕也 (@yuyaphotograph)
on CodePen.

HTML

こちら、今回のカードデザインのHTML構造です！

アコーディオンブロックの数を増やしたい場合は、「Accordion-Item」の塊を2個セットで増やしてあげればOK！

HTML

<div class="Inner">
  <ul class="Accordion">
    <li class="Accordion-Item">〇〇について教えてください。<img src="矢印アイコンのURL" class="Accordion-Item-Icon" alt=""></li>
    <li class="Accordion-Item">結論。〇〇は〜と相性が非常に良いです。</li>
    <li class="Accordion-Item">バナナはおやつに入りますか？<img src="矢印アイコンのURL" class="Accordion-Item-Icon" alt=""></li>
    <li class="Accordion-Item">それはあなた次第ですね。</li>
    <li class="Accordion-Item">日本で２番目に高い山は？<img src="矢印アイコンのURL" class="Accordion-Item-Icon" alt=""></li>
    <li class="Accordion-Item">想像がつきません。</li>
  </ul>
</div>

CSS

こちらスタイリングです！

文字サイズや、背景色、ボーダーの色などはよしなに変更してお使いください。

CSS

.Inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
}

p{
  margin: 0;
  padding: 0;
}
li{
  list-style: none;
}

.Accordion {
  margin-top: 48px;
  width: 100%;
}
.Accordion-Item {
  letter-spacing: 0.075em;
  font-size: 16px;
}
@media screen and (max-width: 480px) {
  .Accordion-Item {
    font-size: 14px;
  }
}
.Accordion-Item:nth-child(odd) {
  border: 1px solid #eee;
  position: relative;
  padding-top: 18px;
  padding-left: 30px;
  padding-bottom: 18px;
  cursor: pointer;
}
@media screen and (max-width: 1025px) and (min-width: 769px) {
  .Accordion-Item:nth-child(odd) {
    padding-right: 35px;
  }
}
@media screen and (max-width: 768px) and (min-width: 481px) {
  .Accordion-Item:nth-child(odd) {
    padding-right: 35px;
  }
}
@media screen and (max-width: 480px) {
  .Accordion-Item:nth-child(odd) {
    padding-right: 30px;
  }
}
.Accordion-Item:nth-child(even) {
  display: none;
  padding-top: 16px;
  padding-left: 30px;
  padding-right: 36px;
  padding-bottom: 24px;
  line-height: 2;
}
@media screen and (max-width: 480px) {
  .Accordion-Item:nth-child(even) {
    padding-left: 8px;
    padding-right: 8px;
  }
}
.Accordion-Item-Icon {
  position: absolute;
  top: 50%;
  right: 36px;
  transform: translateY(-50%);
  width: 18px;
}
@media screen and (max-width: 1025px) and (min-width: 769px) {
  .Accordion-Item-Icon {
    right: 16px;
  }
}
@media screen and (max-width: 768px) and (min-width: 481px) {
  .Accordion-Item-Icon {
    right: 16px;
  }
}
@media screen and (max-width: 480px) {
  .Accordion-Item-Icon {
    right: 8px;
  }
}

jQuery

こちらのスクリプトが今回の大目出玉となります！

jQuery

$(function(){

  $('.Accordion-Item:nth-child(odd)').on('click', function(){
    if ($(this).next().hasClass('isShow')) {
      $(this).next().removeClass('isShow');
      $(this).children('img').attr('src', '初期状態の矢印アイコンのURL');
    } else {
      $(this).next().addClass('isShow');
      $(this).children('img').attr('src', 'メニューが開いた後の矢印アイコンのURL');
    }
    $(this).next().slideToggle();
  });

});

まとめ

以上、実務でよく使われるシンプルなアコーディオンメニューのサンプルコードを紹介しました。

コーポレートサイトの制作案件をする際に必ずや！役立つスキルとなりますのでぜひ覚えていきましょう〜！

コーディングスキルアップシリーズはこちら！

jQueryとVue.jsでアコーディオンメニュー（toggle機能）を作る方法