<details>
  <summary><h3>What are cephalopods?</h3></summary>
  <p>A cephalopod is any member of the molluscan class <i>Cephalopoda</i> such as a squid, octopus, cuttlefish, or nautilus.</p>
</details>

<h3><button aria-expanded="false">What are cephalopods?</button></h3>
<div data-content hidden>
  <p>A cephalopod is any member of the molluscan class <i>Cephalopoda</i> such as a squid, octopus, cuttlefish, or nautilus.</p>
</div>
summary h3 {
  display: inline;
}
const button = document.querySelector("button");
const accordionElement = document.querySelector("[data-content]");

button.addEventListener("click", (element) => {
  const isExpanded = element.target.getAttribute("aria-expanded");

  if (isExpanded === "true") {
    accordionElement.setAttribute("hidden", "");
    element.target.setAttribute("aria-expanded", "false");
  } else {
    accordionElement.removeAttribute("hidden");
    element.target.setAttribute("aria-expanded", "true");
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.