accordion-flush

bootstrap5.css

bootstrap5.css
.accordion-flush .accordion-button {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}
bootstrap5.css
.accordion-flush .accordion-collapse {
  border-width: 0;
}
bootstrap5.css
.accordion-flush .accordion-item:first-of-type .accordion-button {
  border-top-width: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
bootstrap5.css
.accordion-flush .accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-width: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

html bootstrap5 Sample

js アコーディオンflushタイプのメニュー:accordion-flush


本文

本文

本文
  <!-- アコーディオンを親コンテナと一緒に 端から端までレンダリングします。 -->
  <!-- data-bs-parentに同じ親のidを指定する accordionFlushExample -->  
  <div class="accordion accordion-flush" id="accordionFlushExample">
    <div class="accordion-item">
      <h3 class="accordion-header" id="flush-headingOne">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
          data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">Accordion Item
          #1</button>
      </h3>
      <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne"
        data-bs-parent="#accordionFlushExample">
        <div class="accordion-body">本文</div>
      </div>
    </div>
    <div class="accordion-item">
      <h3 class="accordion-header" id="flush-headingTwo">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
          data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">Accordion Item
          #2</button>
      </h3>
      <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo"
        data-bs-parent="#accordionFlushExample">
        <div class="accordion-body">本文</div>
      </div>
    </div>
    <div class="accordion-item">
      <h3 class="accordion-header" id="flush-headingThree">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
          data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">Accordion
          Item #3</button>
      </h3>
      <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree"
        data-bs-parent="#accordionFlushExample">
        <div class="accordion-body">本文</div>
      </div>
    </div>
  </div>