複数箇所アコーディオンに別々のCSSで装飾する方法｜jQuery

2024年11月28日

JQuery(JavaScript)は共用した状態でアコーディオンのアニメーションを複数のページやセクションで使い、かつ別々CSSで装飾したい時の方法を紹介します。

方法の要点

方法の要点をまとめると下記のようになります。

jQuery（またはJavaScript）で連動する要素のクラスは共通とする
共通する要素のCSS装飾を複数箇所で変えたい時は、jQueryと連動するクラス属性の他に装飾専用のクラス属性を加える

単純なコード事例を使って説明

例えば下の例の場合、クラス属性「accordion_header」に対してjQueryが作用してアコーディオンが動作します。その場合は下記のようにコードを書くと設置場所ごとに別々にCSSを当てることができる。

設置箇所ごとに別々のCSSを当てたい時はJS専用クラス属性「accordion_header」とは別に「page-about-sec01-accordion_header」や「page-about-sec02-accordion_header」等の装飾専用クラス属性を設置箇所ごとに追加する。
装飾のためのCSSはその装飾専用クラス属性「page-about-sec01-accordion_header」や「page-about-sec02-accordion_header」等に対して記述すると設置箇所ごとに別々のCSSを当てることができる。

jQuery

$(document).ready(function() {
　　　　// タイトルをクリックした場合
  $('.accordion_header').click(function() {
    // アコーディオン（内容）の開閉    
    $(this).next('.accordion_content').slideToggle(200);
    // タイトルにopenクラスを付与または削除して矢印回転
    $(this).toggleClass("open",200);
  });
});

アコーディオン動作に必要なクラス属性（CSSセレクタ）

「.accordion_header」のみです。

HTML

<!--  アコーディオン１  -->
<dl class="accordion">
  <dt class="accordion_header page-about-sec01-accordion_header">タイトル</dt>
  <dd class="accordion_content">
    内容：ここに内容が入りますここに内容が入りますここに内容が入ります
  </dd>
</dl>
<!--  アコーディオン２  -->
<dl class="accordion">
  <dt class="accordion_header page-about-sec02-accordion_header">タイトル</dt>
  <dd class="accordion_content">
    内容：ここに内容が入りますここに内容が入りますここに内容が入ります
  </dd>
</dl>

CSSで装飾を行うセレクタ（クラス属性）

例えば、アコーディオンのヘッダー部分のCSS装飾を別々にしたい場合は下記セレクタについて別々にCSSを書く

page-about-sec01-accordion_header
page-about-sec02-accordion_header

/* アコーディオンのヘッダー１ */
.page-about-sec01-accordion_header{
 background-color: red;
}
/* アコーディオンのヘッダー２ */
.page-about-sec02-accordion_header{
 background-color: green;
}

もう少し複雑なコード事例｜WordPress

以下、自分のメモ用も兼ねてWordPressで実際に使ったアコーディオンコードの抜粋を掲載しておきます。なお、アコーディオン収納時はヘッダーテキスト右横にプラスマーク、アコーディオンが開いた時はマイナスマークに変化するようなコードです（動作は下記CodePen参照）。

See the Pen jQuery-Accordion-No.2-± by Satoru Shimizu (@sat-simizu) on CodePen.

jQuery

jQueryは上のコードと共通です。

PHP

PHPは下記の場合、装飾用セレクタは「accordion_header」横に付加したクラス属性です。下の例では、「page-about-sec02_accordion_header」と「page-about-sec03_accordion_header」のみです。

<!--  アコーディオン1  -->

<div class="page-about-philosophy_wrapper">
  <!--  アコーディオン1-1  -->
  <dl class="accordion page-about-philosophy_accordion">
    <dt class="page-about-sec02_accordion_header accordion_header">
      <div class="page-about-sec02_number">01</div>
      <div class="page-about-sec02_text">患者様第一</div>
    </dt>
    <dd class="accordion_content">
      <div class="page-about-sec02_content">
        常に患者様の立場に立ち、最適な治療を提供します。
      </div>
    </dd>
  </dl>
  <!--  アコーディオン1-2 -->
  <dl class="accordion page-about-philosophy_accordion">
    <dt class="page-about-sec02_accordion_header accordion_header">
      <div class="page-about-sec02_number">02</div>
      <div class="page-about-sec02_text">最新技術の追求</div>
    </dt>
    <dd class="accordion_content">
      <div class="page-about-sec02_content">
        日々進歩する歯科医療技術を学び、実践します。
      </div>
    </dd>
  </dl>
  <!--  アコーディオン1-3  -->
  <dl class="accordion page-about-philosophy_accordion">
    <dt class="page-about-sec02_accordion_header accordion_header">
      <div class="page-about-sec02_number">03</div>
      <div class="page-about-sec02_text">予防歯科の推進</div>
    </dt>
    <dd class="accordion_content">
      <div class="page-about-sec02_content">
        治療だけでなく、予防にも力を入れ、長期的な歯の健康をサポートします。
      </div>
    </dd>
  </dl>
</div>

<!--  アコーディオン2 -->

<div class="page-about-sec03_wrapper">
  <!--  アコーディオン2-1  -->
  <dl class="accordion page-about-sec03_accordion">
    <div class="age-about-sec03-img_wrapper">
      <img src="<?php echo get_template_directory_uri(); ?>/image/about-sec03_img01.jpg" alt="" class="page-about-sec03_img">
    </div>
    <dt class="page-about-sec03_accordion_header accordion_header">
      苦痛の少ない最新治療法
    </dt>
    <dd class="accordion_content">
      <div class="page-about-sec03_content">
        当院では、院長がスウェーデンで学んだ最新の治療法を導入しています。できる限り歯を削らない・痛みを抑えた治療により、患者様の負担を軽減します。
      </div>
    </dd>
  </dl>
  <!--  アコーディオン2-2  -->
  <dl class="accordion page-about-sec03_accordion">
    <div class="age-about-sec03-img_wrapper">
      <img src="<?php echo get_template_directory_uri(); ?>/image/about-sec03_img02.jpg" alt="" class="page-about-sec03_img">
    </div>
    <dt class="page-about-sec03_accordion_header accordion_header">
      充実のキッズスペース
    </dt>
    <dd class="accordion_content">
      <div class="page-about-sec03_content">
        お子様連れの方も安心して通院いただけるよう、待合室にキッズスペースを設けています。おもちゃや絵本を用意し、お子様が楽しく過ごせる空間を作っています。
      </div>
    </dd>
  </dl>
  <!--  アコーディオン2-3  -->
  <dl class="accordion page-about-sec03_accordion">
    <div class="age-about-sec03-img_wrapper">
      <img src="<?php echo get_template_directory_uri(); ?>/image/about-sec03_img03.jpg" alt="" class="page-about-sec03_img">
    </div>
    <dt class="page-about-sec03_accordion_header accordion_header">
      バリアフリー設計
    </dt>
    <dd class="accordion_content">
      <div class="page-about-sec03_content">
        高齢者の方や車いすをご利用の方にも快適に通院いただけるよう、院内はバリアフリー設計になっています。
      </div>
    </dd>
  </dl>
</div>

CSS

CSSは下記のとおりで、装飾専用のセレクタは次のとおりです。

アコーディオン１

.page-about-sec02_accordion_header　＞アコーディオン収納時のヘッダーの装飾
.page-about-sec02_accordion_header.open　＞アコーディオンが開いた時の装飾
.page-about-sec02_accordion_header::before　＞アコーディオンヘッダーテキスト横のプラスマーク
.page-about-sec02_accordion_header::after　＞同上

アコーディオン２

.page-about-sec03_accordion_header
.page-about-sec03_accordion_header.open
.page-about-sec03_accordion_header::before
.page-about-sec03_accordion_header::after

// ---------------------------------------------------------------
// アコーディオン１
// ---------------------------------------------------------------
.page-about-philosophy_wrapper {
  margin-top: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  @include fw.mq("sp") {
    grid-template-columns: 1fr;
    margin-top: 30px;
  }
}
.page-about-sec02_accordion_header {
  display: grid;
  grid-template-columns: 80px 1fr;
  background-color: fw.$white;
  font-size: 2.4rem;
  line-height: 1.4583;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
  @include fw.mq("tab") {
    grid-template-columns: 50px 1fr;
    height: 50px;
    font-size: 1.6rem;
  }
}
.page-about-sec02_accordion_header.open {
  border-radius: 10px 10px 0 0;
}
.page-about-sec02_number {
  display: grid;
  place-items: center;
  background: fw.$main;
  color: fw.$white;
  font-weight: 600;
}
.page-about-sec02_text {
  display: flex;
  align-items: center;
  font-weight: 500;
  padding: 20px 16px;
  @include fw.mq("tab") {
    padding: 10px 16px;
  }
}
.page-about-sec02_content {
  background-color: fw.$base-light;
  border-radius: 0 0 10px 10px;
  line-height: 1.8;
  padding: 10px 24px 9px 24px;
}
// プラスマーク
.page-about-sec02_accordion_header::before {
  background-color: fw.$text;
}
.page-about-sec02_accordion_header::after {
  background-color: fw.$text;
}
// ---------------------------------------------------------------
// アコーディオン２
// ---------------------------------------------------------------
.page-about-sec03_wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px 20px;
  @include fw.mq("tab") {
    grid-template-columns: 1fr 1fr;
    gap: 20px 20px;
  }
  @include fw.mq("sp") {
    grid-template-columns: 1fr;
    gap: 20px 20px;
  }
}
// 画像
.page-about-sec03_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}
// アコーディオンのヘッダー
.page-about-sec03_accordion_header {
  background-color: fw.$main;
  color: fw.$white;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.4;
  line-height: 1.8;
  padding: 16px 20px;
  border-radius: 0 0 10px 10px;
  @include fw.mq("pc2") {
    font-size: 1.6rem;
  }
  @include fw.mq("sp") {
    font-size: 2rem;
  }
}
.page-about-sec03_accordion_header.open {
  border-radius: 0;
}
// プラスマーク
.page-about-sec03_accordion_header::before {
  background-color: fw.$white;
  @include fw.mq("pc2") {
    width: 16px;
    right: 16px;
  }
}
.page-about-sec03_accordion_header::after {
  background-color: fw.$white;
  @include fw.mq("pc2") {
    width: 16px;
    right: 16px;
  }
}
// アコーディオンの中身
.page-about-sec03_content {
  background-color: fw.$base;
  border-radius: 0 0 10px 10px;
  padding: 20px 16px;
  text-align: justify;
}

SIMS-CODE

【jQuery】アコーディオン基本パターン４種の作り方（CodePen解説）【初心者向け】 | SIMS-CODE 初心者さん向けに、WordPressやサイト制作でよく使われるｊQueryアコーディオンを４種類紹介しました。もCodePenで紹介していますのでHTML・CSS・ｊQueryのコードもコピペ…

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

SIM

■清水WEB制作代表
■コーディング：WordPress（オリジナルテーマ制作等）・HTML・Sass・FLOCSS・JavaScript（jQuery）等
■集客力：YouTube/Instagram/ブログでそれぞれ登録者数16000人/フォロワー13000人/月間最大アクセス50000PVの集客実績があります
■文章作成：博士号所有、会社員時代は科学雑誌に寄稿していたので文章作成も得意です
■写真技術：Amazon Kindle出版で、写真集・撮影編集解説書を５冊好評発売中です