CSSUI アコーディオン サンプル

HTMLとCSSのみで作成。JavaScriptは未使用。

<link rel="stylesheet" href="cssui/cssui.css">
<link rel="stylesheet" href="cssui/accordion/accordion.css">
<style>
[data-accordion-item]:first-child {
  border-radius: 3px 3px 0 0;
}

[data-accordion-item]:last-child {
  border-radius: 0 0 3px 3px;
}
</style>

<section data-accordion>
  <div data-accordion-item>
    <input type="checkbox" id="panel-1">
    <label for="panel-1" data-accordion-label>
      見出し1
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
    </label>
    <div data-accordion-panel>
      サンプルの文章1<br>
      サンプルの文章1<br>
      サンプルの文章1<br>
      サンプルの文章1
    </div>
  </div>
  <div data-accordion-item>
    <input type="checkbox" id="panel-2">
    <label for="panel-2" data-accordion-label>
      見出し2
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
    </label>
    <div data-accordion-panel>
      サンプルの文章2<br>
      サンプルの文章2<br>
      サンプルの文章2<br>
      サンプルの文章2
    </div>
  </div>
  <div data-accordion-item>
    <input type="checkbox" id="panel-3">
    <label for="panel-3" data-accordion-label>
      見出し3
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
    </label>
    <div data-accordion-panel>
      サンプルの文章3<br>
      サンプルの文章3<br>
      サンプルの文章3<br>
      サンプルの文章3
    </div>
  </div>
</section>

元記事を表示する