HTML Native DETAILS/SUMMARY Element
(accordion style - no Javascript)

This example shows how to use the native HTML Details and Summary pop-open section. It only uses Javascript to close the details section (in the button in this example). A containing element is used to allow for grouping and applying styles to the group of pop-opens (ex. rounded borders). Use the Javascript to close other sections when a new section is opened. Do not include Javascript to allow multiple sections to be open at the same time.

https://html.spec.whatwg.org/multipage/interactive-elements.html#the-details-element

First Section

This is the text in this first section.

Use a "Close" button if the section is taller than the normal screen height

Second Section

This is the text in this second section.

Third Section with Sub Pop-Opens

Sub Pop-Open 1 (with Close button)

Sub pop-open 1

Sub Pop-Open 2

Sub pop-open 2

Sub Pop-Open 3

Sub pop-open 3

Code (minimum required)

<div id="detailsGroup1" class="details-group">
  <details>
    <summary><h3>First Section</h3></summary>
    <div>
      <p>This is the text in this first section.</p>
      <p><button type="button" onclick="this.closest('details').removeAttribute('open');">Close</button></p>
      <small>Use a "Close" button if the section is taller than the normal screen height</small>
    </div>
  </details>
  <details>
    <summary><h3>Second Section</h3></summary>
    <div>
      <p>This is the text in this second section.</p>
      <button type="button" onclick="this.closest('details').removeAttribute('open');">Close</button>
    </div>
  </details>
</div>

// init code: add ids of each details_group section (and sub sections)
let detailsSectionsIDs = ['detailsGroup1', 'subDetails3'];
let detailsElements = '';
detailsSectionsIDs.forEach(function (id, index) {
  let detailsElements = document.querySelectorAll("div#" + id + ".details-group > details > summary");
  detailsElements.forEach(function (item) {
    item.addEventListener("click", () => {handle_details_summary_click(id);});
  });
});
</script>

HTML Native DETAILS/SUMMARY Element(accordion style - no Javascript)