Accordion

DEMO

CODE

<div class="demo-stage"><div class="ac-wrap"><div class="ac-item"><button class="ac-head">Motion Lab とは？<span class="ac-icon">+</span></button><div class="ac-body"><p>Webアニメーション効果を動くデモ・コード・AIプロンプトの3点セットで提供するカタログサイトです。</p></div></div><div class="ac-item"><button class="ac-head">コードは無料で使える？<span class="ac-icon">+</span></button><div class="ac-body"><p>はい。掲載コードは商用・非商用を問わず自由に利用でき、出典明記も不要です。</p></div></div><div class="ac-item"><button class="ac-head">AIプロンプトの使い方は？<span class="ac-icon">+</span></button><div class="ac-body"><p>各エフェクトのプロンプトをコピーし、Claude / Cursor / v0 に貼り付けるだけで実装できます。</p></div></div></div></div>

.demo-stage { display:block; padding:1.5rem; }
.ac-wrap { max-width:480px; margin:0 auto; }
.ac-item { border-bottom:1px solid #E5E5E5; }
.ac-head { width:100%; text-align:left; padding:1.1rem .4rem; background:transparent; border:none; font-family:'Oswald',sans-serif; font-size:1rem; letter-spacing:.04em; color:#1A1A1A; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.ac-icon { color:#E91B89; font-size:1.5rem; transition:transform .3s ease; line-height:1; }
.ac-item.open .ac-icon { transform:rotate(45deg); }
.ac-body { max-height:0; overflow:hidden; transition:max-height .4s ease; }
.ac-body p { padding:0 .4rem 1.1rem; color:#5A5A5A; font-size:.86rem; line-height:1.75; }

document.querySelectorAll('.ac-head').forEach(function(head){
  head.addEventListener('click', function(){
    const item = head.parentElement;
    const body = head.nextElementSibling;
    const isOpen = item.classList.contains('open');
    document.querySelectorAll('.ac-item').forEach(function(i){
      i.classList.remove('open');
      i.querySelector('.ac-body').style.maxHeight = null;
    });
    if (!isOpen){
      item.classList.add('open');
      body.style.maxHeight = body.scrollHeight + 'px';
    }
  });
});

AI PROMPT

FAQアコーディオンを作って。各項目は見出しボタン＋本文。本文は初期max-height:0+overflow:hidden、開く時にJSでscrollHeightをmax-heightにセットしてtransition .4sで伸ばす。+アイコンはopen時rotate(45deg)で×に。1つ開くと他は閉じる排他制御。

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。