Vanilla JS Accordion

codeswing.json

{
  "scripts": [],
  "styles": []
}

index.html

<button onclick="Accordion.closeAll();">Close all</button>

<div id="accordion-1">
  <h2>Accordion 1</h2>
  <details>
    <summary>Open me 1</summary>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga obcaecati officia iste enim quis voluptates nihil, facilis officiis repellendus voluptatibus excepturi iusto inventore fugit eveniet nisi nam voluptatem, autem quaerat?</p>
  </details>
  <details>
    <summary>Open me 2</summary>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga obcaecati officia iste enim quis voluptates nihil, facilis officiis repellendus voluptatibus excepturi iusto inventore fugit eveniet nisi nam voluptatem, autem quaerat?</p>
  </details>
</div>

<div id="accordion-2" data-accordion>
  <h2>Accordion 2</h2>
  <details>
    <summary>Open me 1</summary>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga obcaecati officia iste enim quis voluptates nihil, facilis officiis repellendus voluptatibus excepturi iusto inventore fugit eveniet nisi nam voluptatem, autem quaerat?</p>
  </details>
  <details>
    <summary>Open me 2</summary>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga obcaecati officia iste enim quis voluptates nihil, facilis officiis repellendus voluptatibus excepturi iusto inventore fugit eveniet nisi nam voluptatem, autem quaerat?</p>
  </details>
  <details>
    <summary>Open me 3</summary>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga obcaecati officia iste enim quis voluptates nihil, facilis officiis repellendus voluptatibus excepturi iusto inventore fugit eveniet nisi nam voluptatem, autem quaerat?</p>
  </details>
</div>

<div id="not-accordion">
  <h2>Not an accordion</h2>
  <details>
    <summary>Open me 1</summary>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga
      obcaecatiofficia iste enim quis voluptates nihil, facilis officiis
      repellendusvoluptatibus excepturi iusto inventore fugit eveniet nisi nam
      voluptatem,autem quaerat?</p>
  </details>
  <details>
    <summary>Open me 2</summary>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugaobcaecatiofficia iste enim quis voluptates nihil, facilis officiisrepellendusvoluptatibus excepturi iusto inventore fugit eveniet nisi namvoluptatem,autem quaerat?</p>
  </details>
</div>

<div id="accordion-3" data-accordion>
  <h2>Accordion 4</h2>
  <details>
    <summary>Open me 1</summary>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga obcaecati officia iste enim quis voluptates nihil, facilis officiis repellendus voluptatibus excepturi iusto inventore fugit eveniet nisi nam voluptatem, autem quaerat?</p>
  </details>
  <details>
    <summary>Open me 2</summary>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga obcaecati officia iste enim quis voluptates nihil, facilis officiis repellendus voluptatibus excepturi iusto inventore fugit eveniet nisi nam voluptatem, autem quaerat?</p>
  </details>
</div>

script.js

/** Class representing an accordion component. */
class Accordion {
  /**
   * Create an accordion component
   *
   * Accepts a container element which should contain a list of `details` and
   * `summary` elements
   *
   * @param   {String}  selector  The container element.
   */
  constructor(selector) {
    if (typeof selector !== "string") {
      console.error("Accordion selector must be a string");
      return;
    }

    this._container = document.querySelector(selector);

    this._container.addEventListener('click', (event) => this._toggle(event));
  }

  /**
   * Static method to close all `details` elements that are descendants of the
   * passed in container element.
   *
   * @param   {(HTMLElement|HTMLDocument)}  [elem=document]  The container
   */
  static closeAll(elem = document) {
    const opened = elem.querySelectorAll("details[open]");
    for (const elem of opened) {
      elem.removeAttribute("open");
    }
  }

  /** Private methods */
  
  /**
   * Toggle the accordion elements
   *
   * @param   {Event}  event  The triggering event object
   */
  _toggle(event) {
    event.preventDefault();
    
    const details = event.target.closest("details");
    
    if (details.hasAttribute("open")) {
      details.removeAttribute("open");
    } else {
      Accordion.closeAll(this._container);
      details.toggleAttribute("open");
    }
  }
}

// Can target make something an accordion by targeting it directly
new Accordion("#accordion-1");

// Or can target a number of elements by iterating over them
const accordions = [...document.querySelectorAll("[data-accordion]")];
for (let accordion of accordions) {
  accordion = "#" + accordion.id;
  new Accordion(accordion); 
} 

style.css

html {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

p {
  margin: 0;
}

details {
  /* border: 3px solid lightseagreen; */
  border-radius: 5px;
  margin-bottom: .5em;
}

details p {
  padding: .5em;
}

summary:focus {
  box-shadow: 0px 0px 0px 5px gold;
  border-radius: 2px;
}

summary {
  padding: .5em;
}