<div class="controls">
  <label for="named">Named?</label>
  <input checked id=named type="checkbox">
</div>

<section role="group">
  <details name=accordion>
    <summary>Exclusive</summary>
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae et sed consectetur aperiam repellendus, accusantium, facere id earum omnis autem aspernatur perferendis labore ad obcaecati eveniet quasi fuga nemo qui.</span>
  </details>
  <details name=accordion>
    <summary>Accordion</summary>
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae et sed consectetur aperiam repellendus, accusantium, facere id earum omnis autem aspernatur perferendis labore ad obcaecati eveniet quasi fuga nemo qui.</span>
  </details>
  <details name=accordion>
    <summary>Pattern</summary>
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae et sed consectetur aperiam repellendus, accusantium, facere id earum omnis autem aspernatur perferendis labore ad obcaecati eveniet quasi fuga nemo qui.</span>
  </details>
</section>
* {
  box-sizing: border-box;
}

:root {
  --shadow-strength: 1%;
  --shadow-color: 220 40% 2%;
}

body {
  display: grid;
  place-items: center;
  align-content: start;
  min-height: 100vh;
  padding-top: 2rem;
}

.controls {
  position: fixed;
  top: 1rem;
  right: 1rem;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  accent-color: red;
  background: hsl(0 0% 98%);
  border-radius: 0.5rem;
  color: hsl(0 0% 10%);
  border: hsl(0 0% 50% / 0.5) solid 1px;
  box-shadow: 0 1px white inset;
}

summary {
  width: 300px;
  padding: 1rem;
  border-bottom: 1px solid black;
}

details span {
  display: inline-block;
  width: 300px;
  padding: 0 0 0 1rem;
  height: 0;
  overflow: hidden;
  font-weight: 300;
}

details[open] span {
  padding: 1rem 0 1rem 2rem;
  height: fit-content;
}

summary {
  font-weight: 600;
  cursor: pointer;
  position: relative;
  mask: linear-gradient(90deg, white, white) 1.65rem 0 / calc(100% - 1rem) 100% no-repeat;
}

summary::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' %3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A");
  position: absolute;
  top: 50%;
  right: 0;
  width: 20px;
  translate: 0 -35%;
  transition: rotate 0.2s;
  transform-origin: 50% 40%;
}

details[open] summary::after {
  rotate: -180deg;
}

@media(prefers-color-scheme: dark) {
  body {
    color: hsl(0 0% 98%);
    background: hsl(0 0% 10%);
  }
  summary {
    border-color: hsl(0 0% 98% / 0.5);
  }
  summary::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='hsl(0 0% 98%)' %3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A");
  }
}
const CHECK = document.querySelector('[type=checkbox]')

const DEETS = document.querySelectorAll('details')

const TOGGLE = () => {
  if (DEETS[0].matches('[name]')) {
    DEETS.forEach(d => d.removeAttribute('name'))
  } else {
    DEETS.forEach(d => d.setAttribute('name', 'accordion'))
  }
}

CHECK.addEventListener('change', TOGGLE)
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.