<label class="ToggleBar">
  <input id="include-base" type="checkbox" checked>
  Include base styles
</label>

<div class="Accordion">
  <h2 class="Accordion-heading">
    <button class="Accordion-toggle" aria-expanded="true">
      What is this example even for?
      <svg class="Accordion-icon" viewBox="0 0 24 24" height="24" width="24" aria-hidden="true" focusable="false">
        <line x1="4" x2="20" y1="12" y2="12" stroke="currentColor" stroke-linecap="round" stroke-width="2"/>
        <line x1="12" x2="12" y1="4" y2="20" stroke="currentColor" stroke-linecap="round" stroke-width="2"/>
      </svg>
    </button>
  </h2>
  <div class="Accordion-content">
    <p>This pen contains an example of a simple accordion component, written in a way that doesn't depend entirely on outside CSS. The toggle at the top activates or deactivates outside styles to demonstrate this.</p>
  </div>
</div>
<div class="Accordion">
  <h2 class="Accordion-heading">
    <button class="Accordion-toggle">
      Where’d you get this markup structure?
      <svg class="Accordion-icon" viewBox="0 0 24 24" height="24" width="24" aria-hidden="true" focusable="false">
        <line x1="4" x2="20" y1="12" y2="12" stroke="currentColor" stroke-linecap="round" stroke-width="2"/>
        <line x1="12" x2="12" y1="4" y2="20" stroke="currentColor" stroke-linecap="round" stroke-width="2"/>
      </svg>
    </button>
  </h2>
  <div class="Accordion-content" hidden>
    <p>From <a href="https://inclusive-components.design/collapsible-sections/" target="_blank">a wonderful example</a> by Heydon Pickering. Highly recommended!</p>
  </div>
</div>
.Accordion {
  border: 0 solid #DBE5EA;
  border-bottom-width: 1px;
  border-top-width: 1px;
  margin-top: -1px;
  position: relative;
}

.Accordion-heading {
  font: inherit;
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  padding-bottom: 1rem;
  padding-top: 1rem;
}

.Accordion-toggle {
  appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  display: flex;
  font: inherit;
  padding: 0;
  text-align: inherit;
  width: 100%;
}

.Accordion-icon {
  flex: none;
  height: 1.25em;
  margin-left: auto;
  transform-origin: center;
  transition: transform 0.2s ease;
  width: 1.25em;
}

.Accordion-toggle[aria-expanded="true"] .Accordion-icon {
  transform: rotate(-45deg);
}

.Accordion-content {
  padding-bottom: 1rem;
}

.Accordion-content[hidden] {
  display: none !important;
}
const accordions = [...document.querySelectorAll('.Accordion')];

accordions.forEach(container => {
  const toggle = container.querySelector('.Accordion-toggle');
  const content = container.querySelector('.Accordion-content');
  
  toggle.addEventListener('click', () => {
    const expanded = toggle.getAttribute('aria-expanded') === 'true';
    toggle.setAttribute('aria-expanded', !expanded);
    content.hidden = expanded;
  });
});
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600&amp;display=swap
  2. https://codepen.io/tylersticka/pen/b2ec2fc8ed85bb25d5cc21095ed15bc4

External JavaScript

  1. https://codepen.io/tylersticka/pen/b2ec2fc8ed85bb25d5cc21095ed15bc4