コンテンツをコンパクトに! プラスアイコン付きアコーディオンの作り方

ウェブサイトでは、文字情報やリンク、画像などのコンテンツを効率的に表示する必要があります。そこで活躍するのが「アコーディオン」と呼ばれるUIデザインパターンです。アコーディオンではコンテンツを折りたたんで見せることができ、ユーザーが必要な情報を選択して開くことができます。今回は、プラスのアイコンが付いたアコーディオンの作り方をご紹介します。

アコーディオン構造のHTML/CSS

まずは基本的なアコーディオンの構造を確認しましょう。

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-title">
      <span class="icon"></span>
      項目1
    </div>
    <div class="accordion-content">
      <p>項目1の内容が入ります。</p>
    </div>
  </div>
  
  <div class="accordion-item">
    <div class="accordion-title">
      <span class="icon"></span>
      項目2
    </div>
    <div class="accordion-content">
      <p>項目2の内容が入ります。</p>
    </div>
  </div>
</div>

.accordion-item {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.accordion-title {
  background-color: #eee;
  padding: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.icon {
  margin-right: 10px;
  font-weight: bold;
}

.accordion-content {
  padding: 10px;
  background-color: #f9f9f9;
  display: none;
}
.accordion-title.active .icon::before {
  content: '-';
}
.icon::before {
  content: '+';
}

HTMLでは、アコーディオン全体を<div class="accordion">で囲み、個々のアコーディオン項目を<div class="accordion-item">で表現しています。CSSでは、アコーディオン項目のスタイルを設定し、コンテンツ部分は初期状態でdisplay: none;として非表示にしています。

アコーディオン開閉のJavaScript

次に、JavaScriptでアコーディオンの開閉動作を実装します。

const accordionItems = document.querySelectorAll('.accordion-item');

accordionItems.forEach(item => {
  const title = item.querySelector('.accordion-title');
  const content = item.querySelector('.accordion-content');

  title.addEventListener('click', () => {
    // 全てのアコーディオンコンテンツを閉じる
    accordionItems.forEach(item => {
      const content = item.querySelector('.accordion-content');
      content.style.display = 'none';
    });

    // クリックされたアコーディオンコンテンツを開く
    if (content.style.display === 'none') {
      content.style.display = 'block';
    } else {
      content.style.display = 'none';
    }
  });
});

ここでは、まず全てのアコーディオン項目を選択し、それぞれにクリックイベントを設定しています。クリック時には、全てのアコーディオンコンテンツを一旦閉じた後、クリックされた項目のコンテンツのみを開閉します。

プラスアイコンの切り替え

最後に、アコーディオンのタイトル部分のプラスアイコンを、開閉状態に合わせて切り替える機能を追加しましょう。

.icon::before {
  content: '+';
}

.accordion-title.active .icon::before {
  content: '-';
}

title.addEventListener('click', () => {
  // 前のコードはここに...

  // アイコンの切り替え
  title.classList.toggle('active');
});

以上の手順でプラスアイコンが付いたアコーディオンが実装できます。HTMLとCSSで構造を作り、JavaScriptで動作を制御することで、スムーズでわかりやすいアコーディオン UIを実現できます。アコーディオンを使うことで、ウェブサイトのコンテンツをコンパクトに収納でき、ユーザーの視認性を高めることができます。アコーディオンはコンテンツの扱いに幅を持たせるシンプルかつ効果的なUIデザインパターンです。

See the Pen Untitled by 山崎毅 (@lvfthhbg-the-flexboxer) on CodePen.

(Visited 1 times, 1 visits today)

アコーディオン構造のHTML/CSS

アコーディオン開閉のJavaScript

プラスアイコンの切り替え

関連記事: