Semantic Example

A collapsible accordion example using the semantic markup structure. The accordion leverages <details> and <summary> tags. Using semantic elements requires you adhere the markup to expected hierarch and which incur additional nodes in the tree.

FLEMS

Collapse 0

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti. Commodo sed egestas egestas fringilla phasellus faucibus. Eu tincidunt tortor aliquam nulla facilisi cras fermentum. Nullam eget felis eget nunc lobortis mattis. Et netus et malesuada fames ac turpis egestas maecenas. Vitae turpis massa sed elementum tempus egestas. Eget mi proin sed libero enim sed faucibus turpis. Pharetra convallis posuere morbi leo urna molestie. Magna eget est lorem ipsum dolor. Convallis tellus id interdum velit laoreet id. At consectetur lorem donec massa sapien faucibus et molestie. Porttitor lacus luctus accumsan tortor posuere ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti. Commodo sed egestas egestas fringilla phasellus faucibus. Eu tincidunt tortor aliquam nulla facilisi cras fermentum. Nullam eget felis eget nunc lobortis mattis. Et netus et malesuada fames ac turpis egestas maecenas. Vitae turpis massa sed elementum tempus egestas. Eget mi proin sed libero enim sed faucibus turpis. Pharetra convallis posuere morbi leo urna molestie. Magna eget est lorem ipsum dolor. Convallis tellus id interdum velit laoreet id. At consectetur lorem donec massa sapien faucibus et molestie. Porttitor lacus luctus accumsan tortor posuere ac.

Collapse 1

Collapse 2

Commodo sed egestas egestas fringilla phasellus faucibus. Eu tincidunt tortor aliquam nulla facilisi cras fermentum. Nullam eget felis eget nunc lobortis mattis. Et netus et malesuada fames ac turpis egestas maecenas. Vitae turpis massa sed elementum tempus egestas. Eget mi proin sed libero enim sed faucibus turpis. Pharetra convallis posuere morbi leo urna molestie. Magna eget est lorem ipsum dolor. Convallis tellus id interdum velit laoreet id. At consectetur lorem donec massa sapien faucibus et molestie. Porttitor lacus luctus accumsan tortor posuere ac.

<section
  class="semantic-relapse w-100"
  data-relapse="semantic-example"
  data-relapse-duration="220"
  data-relapse-persist="false"
  data-relapse-multiple="false">
  <details open>
    <summary>Collapse 0</summary>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
      labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut.
    </p>
  </details>
  <details>
    <summary>Collapse 1</summary>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
      labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut.
    </p>
  </details>
  <details>
    <summary>Collapse 2</summary>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
      labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut.
    </p>
  </details>
</section>

Events

Siblings Example