tomo-works

アコーディオンの見出し

アコーディオンの内容がここに表示されます。クリックすると開閉します。

コード

<div class="accordion accordion-1">
  <div class="accordion-header" id="accordion-header-1" style="flex-direction: row; justify-content: space-between;">
    <div class="accordion-title">アコーディオンの見出し</div>
    <div class="accordion-icon"><svg class="icon-plus" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <line x1="12" y1="5" x2="12" y2="19"></line>
  <line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
<svg class="icon-minus" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: none;">
  <line x1="5" y1="12" x2="19" y2="12"></line>
</svg></div>
  </div>
  <div class="accordion-content" id="accordion-content-1">
    <div class="accordion-body">アコーディオンの内容がここに表示されます。クリックすると開閉します。</div>
  </div>
</div>

アコーディオンシミュレーター

アコーディオン管理

アコーディオン設定

見出し設定

開閉ボタン設定

コンテンツエリア設定

境界線設定

角丸設定

コード