エンジニアブログ

HOME > css > jqueryは不要！アコーディオン実装方法

jqueryは不要！アコーディオン実装方法

css
jQueryは不要！アコーディオン実装方法

アコーディオンは、ウェブサイトやアプリケーションで情報を整理し、ユーザーにわかりやすく表示する素晴らしい方法です。
しかし、多くの実装がjQueryを使用しています。今回は、初心者の方に向けて、jQueryを使わずにシンプルなアコーディオンを実装する方法を紹介します。

先に解答例

See the Pen accordion by hide (@hide225) on CodePen.

HTMLの構造を設定する

最初に、アコーディオンのセクションをHTMLで構築します。各セクションはヘッダー（クリック可能な部分）とコンテンツ（非表示または表示される部分）で構成されます。
詳細はコメントをご確認ください。

<div class="accordion-list">
  <div class="accordion-item">
    <input type="checkbox" id="accordion1">
    <label for="accordion1" class="accordion-header">アコーディオン 1</label> <!-- タイトル -->
    <div class="accordion-content"> <!-- 中身 -->
      <p>アコーディオン 1のコンテンツがここに入ります。</p>
    </div>
  </div>
  <div class="accordion-item">
    <input type="checkbox" id="accordion2">
    <label for="accordion2" class="accordion-header">アコーディオン 2</label>
    <div class="accordion-content">
      <p>アコーディオン 2のコンテンツがここに入ります。</p>
    </div>
  </div>
</div>

スタイルを設定する

見た目を整えるために、簡単なCSSスタイルを追加します。これは見栄えを整えるだけでなく、読みやすさも向上させます。

.accordion-list {
  max-width: 600px;
  margin: 20px auto;
}

.accordion-item {
  margin-bottom: 25px;
}

.accordion-header {
  background-color: #f1f1f1;
  padding: 10px;
  cursor: pointer;
  display: block;
  position: relative;
  transition: all ease 1s;
}

.accordion-header::before,
.accordion-header::after {
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
  height: 2px;
  width: 15px;
  background-color: #333;
}

.accordion-header::after {
  transform: translateY(-50%) rotate(90deg);
  transition: all ease 0.3s;
}

.accordion-content {
  padding: 10px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

input[type="checkbox"] {
  display: none;
}

/* チェックボックスがチェックされたときにコンテンツを表示 */
input[type="checkbox"]:checked + .accordion-header + .accordion-content {
  max-height: 100px;
}

/* チェックボタンの開閉 */
input[type="checkbox"]:checked + .accordion-header::after {
  transform: translateY(-50%) rotate(360deg);
  opacity: 0;
}

これで、JavaScriptとjQueryを使わずにアコーディオンを実装する準備が整いました。各セクションのヘッダーをクリックすると、対応するコンテンツが表示されたり非表示になったりします。

このシンプルな実装を通して、基本的なHTML、CSS、JavaScriptの連携がどのように行われているかを理解していきたいですね。

\ シェアしてね！ /

関連記事