アコーディオン

アコーディオンのUIギャラリーです

基本

概要 コンテンツコンテンツコンテンツ
コンテンツコンテンツコンテンツ
Q. 開閉に滑らかなアニメーションを付与できますか？ A. JSを使用すれば可能です

ここではHTMLとCSSで完結させているためアニメーションは付与していません。
概要 コンテンツコンテンツコンテンツ
コンテンツコンテンツコンテンツ
  • HTML
  • CSS 
          
<div class="prev-area">
  <details class="prev-details">
    <summary class="prev-summary">
      概要
      <span class="prev-icon" />
    </summary>
    <span class="prev-detail-content">コンテンツコンテンツコンテンツ<br>コンテンツコンテンツコンテンツ</span>
  </details>
</div>