<div class="container">
  <h2>Some questions</h2>
  <section class="accordion-wrapper" data-accordion>
    <details>
      <summary>
        How can we do this?
        <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
        </svg>
      </summary>
      <div class="details-info">
        <h2>This can have a title or image</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo. Duis rhoncus tempor tempus. Nulla facilisi. Maecenas nulla ante, lacinia ac consectetur non, aliquet sollicitudin libero. Quisque congue odio sodales dui fermentum ac laoreet mauris eleifend. Nulla facilisi.</p>
        <img src="https://picsum.photos/900/600?random=1" alt="" />
        <p>Phasellus vel erat a ante pharetra pharetra. <a href="https://utilitybend.com/blog" target="_blank">Go to utilitybend</a></p>
      </div>
    </details>
    <details>
      <summary>
        Does this require any JavaScript?
        <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
        </svg>
      </summary>
      <div class="details-info">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo. Duis rhoncus tempor tempus. Nulla facilisi. Maecenas nulla ante, lacinia ac consectetur non, aliquet sollicitudin libero. Quisque congue odio sodales dui fermentum ac laoreet mauris eleifend. Nulla facilisi. Phasellus vel erat a ante pharetra pharetra.</p>
      </div>
    </details>
    <details>
      <summary>
        Is this accessible?
        <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
        </svg>
      </summary>
      <div class="details-info">
        <h2>Lorem ipsum dolor sit amet</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo. Duis rhoncus tempor tempus. Nulla facilisi. Maecenas nulla ante, lacinia ac consectetur non, aliquet sollicitudin libero. Quisque congue odio sodales dui fermentum ac laoreet mauris eleifend. Nulla facilisi. Phasellus vel erat a ante pharetra pharetra.</p>
      </div>
    </details>
  </section>
  <h2>A different group of questions</h2>
  <section class="accordion-wrapper" data-accordion>
    <details>
      <summary>
        How can we do this?
        <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
        </svg>
      </summary>
      <div class="details-info">
        <h2>This can have a title or image</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo. Duis rhoncus tempor tempus. Nulla facilisi. Maecenas nulla ante, lacinia ac consectetur non, aliquet sollicitudin libero. Quisque congue odio sodales dui fermentum ac laoreet mauris eleifend. Nulla facilisi.</p>
        <img src="https://picsum.photos/900/600?random=1" alt="" />
        <p>Phasellus vel erat a ante pharetra pharetra. <a href="https://utilitybend.com/blog" target="_blank">Go to utilitybend</a></p>
      </div>
    </details>
    <details>
      <summary>
        Does this require any JavaScript?
        <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
        </svg>
      </summary>
      <div class="details-info">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo. Duis rhoncus tempor tempus. Nulla facilisi. Maecenas nulla ante, lacinia ac consectetur non, aliquet sollicitudin libero. Quisque congue odio sodales dui fermentum ac laoreet mauris eleifend. Nulla facilisi. Phasellus vel erat a ante pharetra pharetra.</p>
      </div>
    </details>
    <details>
      <summary>
        Is this accessible?
        <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
        </svg>
      </summary>
      <div class="details-info">
        <h2>Lorem ipsum dolor sit amet</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo. Duis rhoncus tempor tempus. Nulla facilisi. Maecenas nulla ante, lacinia ac consectetur non, aliquet sollicitudin libero. Quisque congue odio sodales dui fermentum ac laoreet mauris eleifend. Nulla facilisi. Phasellus vel erat a ante pharetra pharetra.</p>
      </div>
    </details>
  </section>
</div>

:root {
  --container-width: 800px;
  --body-bg: #36558f;
  --body-color: #fff;
  --collapse-bg: #e6ebe0;
  --collapse-color: #1a1a1a;
  --collapse-line-color: #5ca4a9;
  --collapse-icon-color: #ed6a5a;
  --collapse-box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
    rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

.accordion-wrapper {
  margin-bottom: 2rem;
  box-shadow: var(--collapse-box-shadow);
  border: 3px solid var(--collapse-line-color);
}

details {
  background: var(--collapse-bg);
  color: var(--collapse-color);
}

details:not(:first-child) {
  border-top: 1px solid var(--collapse-line-color);
}

summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  cursor: pointer;
  list-style-type: none;
}

summary,
.details-info {
  padding: 1rem;
}

summary .icon {
  transition: transform 0.26s;
  color: var(--collapse-icon-color);
}

.details-info {
  border-top: 1px dashed var(--collapse-line-color);
}

details[open] summary .icon {
  transform: rotate(45deg);
}

/* You could try to add some css animation here, but in the end, it doesn't work that well, uncomment the following to try it out */
/*
details[open] .details-info {
  animation: growAndFadeIn .24s ease-out forwards;
}*/

/* some basic styling (added to the bottom for convenience) */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Lato", sans-serif;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--body-color);
  background: var(--body-bg);
}

img {
  display: block;
  max-width: 100%;
  margin: 0 0 24px 0;
}

h2 {
  margin: 0 0 8px 0;
  font-family: "Merriweather", serif;
  font-size: 1.5rem;
}

a {
  color: darkorange;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 20px;
}

.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
}

@keyframes growAndFadeIn {
  0% {
    font-size: 0;
    opacity: 0;
  }
  90% {
    font-size: 1em;
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

const accordionItems = document.querySelectorAll("[data-accordion] > details");

const siblings = (el) => {
  if (el.parentNode === null) return [];
  return Array.prototype.filter.call(el.parentNode.children, function (child) {
    return child !== el;
  });
};

accordionItems.forEach((el) => {
  el.addEventListener("click", () => {
    const others = siblings(el);
    others.forEach((sibling) => {
      sibling.removeAttribute("open");
    });
  });
});