HTML description with details and summary tags

by rcugut

HTML

<div class="py-3 fr-view">
  <div class="accordion">
    
    <details>
      <summary>Weight Ranges</summary>
      weight ranges ... Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
      ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
      ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
      voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
      sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
      mollit anim id est laborum
    </details>

    <details>
      <summary>Treatments</summary>
      weight ranges... Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
      ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
      ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
      voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
      sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
      mollit anim id est laborum
    </details>

    <details>
      <summary>Movement Control</summary>
      grazing ... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
      do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
      ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum
    </details>
  </div>
</div>

CSS

.accordion {
  details {
    border: 1px solid #ccc;
    margin-bottom: 0.5rem;
  }

  summary {
    display: block;
    background: #007bff;
    color: white;
    padding: 0.5rem;
    cursor: pointer;
  }

  details[open] summary {
    border-bottom: 1px solid red;
    margin-bottom: 0.5em;
  }
}