AI向け説明 AI Description

展開/折りたたみ可能なアコーディオン。各セクションのヘッダーをクリックすると、コンテンツが展開/折りたたみされます。`max-height`と`transition`でスムーズなアニメーションを実装します。`is-open`クラスで開閉状態を管理し、アイコンは`transform: rotate()`で回転させます。同時に1つだけ開く場合は、他のセクションを閉じるロジックを追加します。CSS変数（`--accordion-duration`、`--accordion-bg`、`--accordion-border`、`--accordion-easing`）を使用して、アニメーション速度、スタイル、イージング関数をカスタマイズできます。アニメーションを無効化する場合は、`no-animation`クラスを追加します。

An expandable/collapsible accordion. Clicking each section's header expands/collapses the content. Smooth animation is implemented with `max-height` and `transition`. Open/close state is managed with `is-open` class, and icon is rotated with `transform: rotate()`. To allow only one open at a time, add logic to close other sections. Use CSS variables (`--accordion-duration`, `--accordion-bg`, `--accordion-border`, `--accordion-easing`) to customize animation speed, styling, and easing function. To disable animation, add `no-animation` class.

調整可能パラメータ Adjustable Parameters

• --accordion-duration — 展開/折りたたみのアニメーション速度（例: 0.3s, 0.5s） expand/collapse animation duration (e.g., 0.3s, 0.5s)
• --accordion-bg — アコーディオンの背景色（例: rgba(255, 255, 255, 0.05)） accordion background color (e.g., rgba(255, 255, 255, 0.05))
• --accordion-border — ボーダーの色（例: rgba(92, 106, 196, 0.2)） border color (e.g., rgba(92, 106, 196, 0.2))
• --accordion-easing — アニメーションのイージング関数（例: cubic-bezier(0.4, 0, 0.2, 1), ease, linear） animation easing function (e.g., cubic-bezier(0.4, 0, 0.2, 1), ease, linear)
• animation toggle — アニメーションの有効/無効を切り替え（`no-animation`クラスで無効化） toggle animation on/off (disable with `no-animation` class)
• icon style — アイコンのスタイル（+, -, ▼など） icon style (+, -, ▼, etc.)
• single/multiple — 同時に1つだけ開くか、複数開けるか allow only one open at a time or multiple

実装 Implementation

HTML + CSS + JS

<div class="accordion" data-accordion>
  <div class="accordion__header">
    Section Title
    <span class="accordion__icon"></span>
  </div>
  <div class="accordion__content">
    <div class="accordion__body">
      Content here
    </div>
  </div>
</div>

<style>
:root {
  --accordion-duration: 0.3s;
  --accordion-bg: rgba(255, 255, 255, 0.3);
  --accordion-border: rgba(92, 106, 196, 0.2);
  --accordion-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion {
  background: var(--accordion-bg);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
  border-bottom: 5px solid var(--accordion-border);
}

.accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--accordion-duration) var(--accordion-easing), padding var(--accordion-duration) var(--accordion-easing);
  padding: 0;
}

.accordion.is-open .accordion__content {
  max-height: 500px;
  padding-bottom: 16px;
}

.accordion.no-animation .accordion__content {
  transition: none;
}

.accordion__icon {
  transition: transform var(--accordion-duration) var(--accordion-easing);
}

.accordion.is-open .accordion__icon {
  transform: rotate(45deg);
}

.accordion.no-animation .accordion__icon {
  transition: none;
}
</style>

<script>
const accordion = document.querySelector("[data-accordion]");
const header = accordion.querySelector(".accordion__header");

header.addEventListener("click", () => {
  accordion.classList.toggle("is-open");
});

// CSS変数を動的に変更する例
document.documentElement.style.setProperty("--accordion-duration", "0.5s");
document.documentElement.style.setProperty("--accordion-bg", "rgba(255, 255, 255, 0.5)");
document.documentElement.style.setProperty("--accordion-border", "rgba(92, 106, 196, 0.3)");
document.documentElement.style.setProperty("--accordion-easing", "ease-out");

// アニメーションを無効化する例
accordion.classList.add("no-animation");
</script>

React (JSX + CSS)

// react/I-005.jsx
import { useState } from "react";
import "./I-005.css";

export default function Accordion({ 
  title, 
  children,
  duration = "0.3s",
  bgColor = "rgba(255, 255, 255, 0.3)",
  borderColor = "rgba(92, 106, 196, 0.2)",
  easing = "cubic-bezier(0.4, 0, 0.2, 1)",
  noAnimation = false
}) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div 
      className={`accordion ${isOpen ? "is-open" : ""} ${noAnimation ? "no-animation" : ""}`}
      style={{
        "--accordion-duration": duration,
        "--accordion-bg": bgColor,
        "--accordion-border": borderColor,
        "--accordion-easing": easing
      }}
    >
      <div
        className="accordion__header"
        onClick={() => setIsOpen(!isOpen)}
      >
        {title}
        <span className="accordion__icon"></span>
      </div>
      <div className="accordion__content">
        <div className="accordion__body">
          {children}
        </div>
      </div>
    </div>
  );
}

/* react/I-005.css */
:root {
  --accordion-duration: 0.3s;
  --accordion-bg: rgba(255, 255, 255, 0.3);
  --accordion-border: rgba(92, 106, 196, 0.2);
  --accordion-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion {
  background: var(--accordion-bg);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
  border-bottom: 5px solid var(--accordion-border);
}

.accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--accordion-duration) var(--accordion-easing), padding var(--accordion-duration) var(--accordion-easing);
  padding: 0;
}

.accordion.is-open .accordion__content {
  max-height: 500px;
  padding-bottom: 16px;
}

.accordion.no-animation .accordion__content {
  transition: none;
}

.accordion__icon {
  transition: transform var(--accordion-duration) var(--accordion-easing);
}

.accordion.is-open .accordion__icon {
  transform: rotate(45deg);
}

.accordion.no-animation .accordion__icon {
  transition: none;
}