examples

dynamic

progressive enhancement

details opener

This example restores the open/close state of details elements when the page is loaded. Open some of the details and refresh the page to see the result

Lorem ipsum mollis bibendum

Dui venenatis aliquam. Commodo cras turpis. Bibendum bibendum nunc. Maximus feugiat scelerisque egestas.

Efficitur tincidunt cras id elit vel. Velit accumsan libero ornare condimentum. Vitae volutpat hac diam suscipit. Metus nisi porta. Bibendum volutpat leo sit sodales facilisis.

Sagittis nam convallis

Facilisis sit elit. Ornare molestie vestibulum quam. Auctor libero nullam tellus.

Libero nibh diam tincidunt leo urna. Mattis.

Lacus semper urna

Sem vitae convallis semper molestie dapibus. Imperdiet ultricies justo dignissim. Sapien id viverra. Eleifend nullam aliquet.

Neque elementum nec rhoncus nullam. Accumsan euismod porta porta platea. Elementum tempus porta. Bibendum nisi interdum vel id risus. Metus congue eu eleifend. Facilisis gravida malesuada vivamus.

Nullam nullam eget mi iaculis posuere. Augue urna mi. Sed posuere aliquam eget.

Hac feugiat purus

Consectetur curabitur dignissim. Elementum volutpat consequat tincidunt imperdiet. Ligula suscipit sem lacinia.

Suscipit tempor sollicitudin. Platea diam ante erat euismod euismod. Arcu cras elementum.

Risus vel turpis eros sodales.

Malesuada eu facilisis

Libero nulla varius. Adipicing massa aliquam. Eu orci varius facilisis nam amet. Eleifend id bibendum iaculis. Erat lobortis accumsan varius bibendum nam.

Eget congue dolor aliquam phasellus. Ipsum consequat diam. Mollis tortor augue dolor. Risus convallis interdum posuere.

Sagittis nam convallis

Aliquam et risus iaculis. Finibus etiam platea aenean duis iaculis. Lectus laoreet venenatis urna facilisis feugiat. Odio donec ut nisi augue.

Lacus semper urna

Hac auctor porta non. Curabitur ut magna at. Euismod mattis eros. Quisque congue tincidunt. A mattis libero ante eget enim. Eu erat tincidunt tortor iaculis. Risus erat venenatis aliquam consectetur dictum.

Praesent lacinia porta nunc velit. Commodo malesuada fermentum aliquet. Et posuere ante aliquet metus. Dictumst purus dignissim eros finibus duis. Fermentum sit eu tincidunt.

Hac feugiat purus

Malesuada rhoncus sapien quisque posuere. Velit maecenas eleifend fusce. A ac condimentum faucibus diam vivamus. Malesuada nisl sollicitudin.

Metus facilisis convallis. Faucibus viverra dui in. Sodales ipsum aenean pellentesque. Accumsan eleifend purus ac sit rutrum. Nec felis morbi.

Faucibus nullam ipsum

Commodo tellus eros consequat nulla faucibus. Morbi ipsum accumsan sollicitudin. Eget tristique dignissim magna. Massa elementum est pellentesque. Platea elit rutrum.

Lacinia libero eros.

Sagittis nam convallis

Sem lobortis vel luctus quam. Nisi sollicitudin libero. Semper adipicing metus purus. Sapien nam auctor ultricies etiam. Sapien venenatis sagittis ac. Nibh lorem molestie finibus arcu orci. Erat maecenas accumsan molestie finibus.

Lacus semper urna

Blandit elit magna luctus. Rutrum curabitur consequat consectetur sagittis enim. Venenatis mauris nunc. Aliquam leo eget.

Feugiat dictum bibendum. Vivamus lacus sed eu. Ullamcorper tellus gravida. Nibh venenatis morbi aliquet. Laoreet turpis phasellus nibh.

Hac feugiat purus

Vel nisl posuere metus mattis ut. Ultricies sapien mollis. Dolor aliquet nulla at auctor tincidunt. Proin auctor leo.

Urna porttitor eleifend dignissim tincidunt fusce. Arcu euismod imperdiet vestibulum. Vestibulum ullamcorper nunc condimentum pellentesque bibendum. Diam posuere aliquet. Diam ornare nunc urna porttitor nam.

Tristique habitasse nam. Euismod et condimentum rutrum lectus quis. Etiam tincidunt proin. Nullam fusce tristique in lacus imperdiet. Phasellus lacus libero laoreet semper condimentum. Dui consequat nisi velit nec. Suscipit habitasse morbi.

Sagittis volutpat convallis praesent. Fermentum aliquam fringilla pellentesque. Vestibulum praesent elementum.

view html

<div class="default-flow">
<details>
  <summary>Lorem ipsum mollis bibendum</summary>
    <p>
      Dui venenatis aliquam. Commodo cras turpis. Bibendum bibendum nunc. Maximus feugiat scelerisque egestas.
    </p>
    <p>
      Efficitur tincidunt cras id elit vel. Velit accumsan libero ornare condimentum. Vitae volutpat hac diam suscipit. Metus nisi porta. Bibendum volutpat leo sit sodales facilisis.
    </p>
  <details>
    <summary>Sagittis nam convallis</summary>
      <p>
        Facilisis sit elit. Ornare molestie vestibulum quam. Auctor libero nullam tellus.
      </p>
      <p>
        Libero nibh diam tincidunt leo urna. Mattis.
      </p>
    <details>
      <summary>Lacus semper urna</summary>
      <p>
        Sem vitae convallis semper molestie dapibus. Imperdiet ultricies justo dignissim. Sapien id viverra. Eleifend nullam aliquet.
      </p>
    </details>
    <p>
      Neque elementum nec rhoncus nullam. Accumsan euismod porta porta platea. Elementum tempus porta. Bibendum nisi interdum vel id risus. Metus congue eu eleifend. Facilisis gravida malesuada vivamus.
    </p>
  </details>
  <p>
    Nullam nullam eget mi iaculis posuere. Augue urna mi. Sed posuere aliquam eget.
  </p>
  <details>
    <summary>Hac feugiat purus</summary>
    <p>
      Consectetur curabitur dignissim. Elementum volutpat consequat tincidunt imperdiet. Ligula suscipit sem lacinia.
    </p>
  </details>
  <p>
    Suscipit tempor sollicitudin. Platea diam ante erat euismod euismod. Arcu cras elementum.
  </p>
  <p>
    Risus vel turpis eros sodales.
  </p>
</details>

  
<details>
  <summary>Malesuada eu facilisis</summary>
  <p>
    Libero nulla varius. Adipicing massa aliquam. Eu orci varius facilisis nam amet. Eleifend id bibendum iaculis. Erat lobortis accumsan varius bibendum nam.
  </p>
  <p>
    Eget congue dolor aliquam phasellus. Ipsum consequat diam. Mollis tortor augue dolor. Risus convallis interdum posuere.
  </p>
  <details>
    <summary>Sagittis nam convallis</summary>
    <p>
      Aliquam et risus iaculis. Finibus etiam platea aenean duis iaculis. Lectus laoreet venenatis urna facilisis feugiat. Odio donec ut nisi augue.
    </p>
    <details>
      <summary>Lacus semper urna</summary>
      <p>
        Hac auctor porta non. Curabitur ut magna at. Euismod mattis eros. Quisque congue tincidunt. A mattis libero ante eget enim. Eu erat tincidunt tortor iaculis. Risus erat venenatis aliquam consectetur dictum.
      </p>
    </details>
    <p>
      Praesent lacinia porta nunc velit. Commodo malesuada fermentum aliquet. Et posuere ante aliquet metus. Dictumst purus dignissim eros finibus duis. Fermentum sit eu tincidunt.
    </p>
  </details>
  <details>
    <summary>Hac feugiat purus</summary>
    <p>
      Malesuada rhoncus sapien quisque posuere. Velit maecenas eleifend fusce. A ac condimentum faucibus diam vivamus. Malesuada nisl sollicitudin.
    </p>
  </details>
  <p>
    Metus facilisis convallis. Faucibus viverra dui in. Sodales ipsum aenean pellentesque. Accumsan eleifend purus ac sit rutrum. Nec felis morbi.
  </p>
</details>

  
<details>
  <summary>Faucibus nullam ipsum</summary>
  <p>
    Commodo tellus eros consequat nulla faucibus. Morbi ipsum accumsan sollicitudin. Eget tristique dignissim magna. Massa elementum est pellentesque. Platea elit rutrum.
  </p>
  <p>
    Lacinia libero eros.
  </p>
  <details>
    <summary>Sagittis nam convallis</summary>
    <p>
      Sem lobortis vel luctus quam. Nisi sollicitudin libero. Semper adipicing metus purus. Sapien nam auctor ultricies etiam. Sapien venenatis sagittis ac. Nibh lorem molestie finibus arcu orci. Erat maecenas accumsan molestie finibus.
    </p>
    <details>
      <summary>Lacus semper urna</summary>
      <p>
        Blandit elit magna luctus. Rutrum curabitur consequat consectetur sagittis enim. Venenatis mauris nunc. Aliquam leo eget.
      </p>
      <p>
        Sem lobortis vel luctus quam. Nisi sollicitudin libero. Semper adipicing metus purus. Sapien nam auctor ultricies etiam. Sapien venenatis sagittis ac. Nibh lorem molestie finibus arcu orci. Erat maecenas accumsan molestie finibus.
      </p>
    </details>
    <p>
      Blandit elit magna luctus. Rutrum curabitur consequat consectetur sagittis enim. Venenatis mauris nunc. Aliquam leo eget.
    </p>
  </details>
  <p>
    Feugiat dictum bibendum. Vivamus lacus sed eu. Ullamcorper tellus gravida. Nibh venenatis morbi aliquet. Laoreet turpis phasellus nibh.
  </p>
  <details>
    <summary>Hac feugiat purus</summary>
    <p>
      Vel nisl posuere metus mattis ut. Ultricies sapien mollis. Dolor aliquet nulla at auctor tincidunt. Proin auctor leo.
    </p>
    <p>
      Urna porttitor eleifend dignissim tincidunt fusce. Arcu euismod imperdiet vestibulum. Vestibulum ullamcorper nunc condimentum pellentesque bibendum. Diam posuere aliquet. Diam ornare nunc urna porttitor nam.
    </p>
  </details>
  <p>
    Tristique habitasse nam. Euismod et condimentum rutrum lectus quis. Etiam tincidunt proin. Nullam fusce tristique in lacus imperdiet. Phasellus lacus libero laoreet semper condimentum. Dui consequat nisi velit nec. Suscipit habitasse morbi.
  </p>
  <p>
    Sagittis volutpat convallis praesent. Fermentum aliquam fringilla pellentesque. Vestibulum praesent elementum.
  </p>
</details>
</div>

javascript

export const b = { init: "initDetails" };

let data;
let key = `details-opener`;

export async function initDetails() {
  data = await b.loadPageData(key, []);
  b.qsa("details").forEach((el, index) => {
    el.open = data[index] ? true : false;
    el.addEventListener("toggle", (_) => updateData());
  });
}

async function updateData() {
  b.qsa("details").forEach((el, index) => {
    data[index] = el.open;
  });
  await b.savePageData(data, key);
}