CCHub Logo CCHub Tailwind Collection
コンポーネント アコーディオン アコーディオンコンポーネント

アコーディオンコンポーネント

アースカラーの配色、適度な複雑さ、ソーシャルメディア用、レスポンシブデザイン、ダークテーマのサポートを備えたダークモードアコーディオンコンポーネント。JavaScript はありません。

プレビュー

HTMLコード 

<div class="max-w-md mx-auto rounded-md overflow-hidden shadow-lg bg-stone-800 dark:bg-stone-900">
  <div class="accordion">
    <div class="accordion-item">
      <input type="checkbox" id="accordion1" class="hidden">
      <label for="accordion1" class="flex justify-between items-center p-4 cursor-pointer bg-stone-700 dark:bg-stone-800 text-stone-200 dark:text-stone-300">
        Section 1
        <svg class="w-5 h-5 text-stone-200 dark:text-stone-300 transform transition-transform duration-300 ease-in-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="accordion-content px-4 pb-4 text-stone-300 dark:text-stone-400 hidden">
        <p>Content for section 1.</p>
      </div>
    </div>
    <div class="accordion-item">
      <input type="checkbox" id="accordion2" class="hidden">
      <label for="accordion2" class="flex justify-between items-center p-4 cursor-pointer bg-stone-700 dark:bg-stone-800 text-stone-200 dark:text-stone-300">
        Section 2
        <svg class="w-5 h-5 text-stone-200 dark:text-stone-300 transform transition-transform duration-300 ease-in-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="accordion-content px-4 pb-4 text-stone-300 dark:text-stone-400 hidden">
        <p>Content for section 2.</p>
      </div>
    </div>
  </div>
</div>

<style>
.accordion-item input:checked ~ label svg {
  transform: rotate(180deg);
}
.accordion-item input:checked ~ .accordion-content {
  display: block;
}
</style>

関連コンポーネント

ダークモードアコーディオン

ダッシュボード用のレスポンシブダークモードアコーディオンコンポーネント

開ける

ソーシャルメディアアコーディオン

ダークテーマのレスポンシブアコーディオンコンポーネント マテリアルデザインの原則、トライアドカラースキーム、シンプルなレイアウトを使用したソーシャルメディアインターフェイスのサポート。JavaScriptはなく、Tailwind CSSクラスを含むHTMLのみ。ダークモードのスタイルは、dark: プレフィックスを使用して含まれます。

開ける

マテリアルデザインアコーディオンコンポーネント - 追い風CSS

レスポンシブエフェクトやダークテーマのサポートなど、マテリアルデザインのスタイルを備えたアコーディオンコンポーネント。Tailwind CSSを使用し、プレースホルダー画像/アバターが含まれています。

開ける