<ul class="accordion">
  <li class="accordion-item">
    <div class="accordion-header">Little mummy's boy</div>

    <ul class="accordion-content">
      <li class="accordion-content-item"><a class="accordion-link" href="#">He wasn't very old</a></li>
      <li class="accordion-content-item"><a class="accordion-link" href="#">Though he was very small</a></li>
      <li class="accordion-content-item"><a class="accordion-link" href="#">He did what he was told</a></li>
    </ul>
  </li>

  <li class="accordion-item">
    <div class="accordion-header">He'd stay awake at night</div>

    <ul class="accordion-content">
      <li class="accordion-content-item"><a class="accordion-link" href="#">Lying in his bed</a></li>
      <li class="accordion-content-item"><a class="accordion-link" href="#">No one ever listened</a></li>
      <li class="accordion-content-item"><a class="accordion-link" href="#">To a single word he said</a></li>
    </ul>
  </li>

  <li class="accordion-item">
    <div class="accordion-header">Now little Jimmy's gone</div>

    <ul class="accordion-content">
      <li class="accordion-content-item"><a class="accordion-link" href="#">He disappeared one day</a></li>
      <li class="accordion-content-item"><a class="accordion-link" href="#">But no one saw the ambulance</a></li>
      <li class="accordion-content-item"><a class="accordion-link" href="#">That took little Jim away</a></li>
    </ul>
  </li>
</ul>
body {
  padding: 1em;
  background-color: #050005;
  overflow-y: scroll;
}

div,
ul,
li {
  margin: 0;
  padding: 0;
}

.accordion {
  font-family: Courier New, Courier, monospace;
}

.accordion,
.accordion-content {
  list-style: none;
}

.accordion-header,
.accordion-content-item {
  margin: .2em;
}

.accordion-header,
.accordion-link {
  color: white;
  padding: 1em;
}

.accordion-header {
  position: relative;
  padding-right: 2em;   
  background-color: #230023;
  border: 1px solid #6D006D;
  cursor: pointer;
}

.accordion-header:hover {
  background-color: #2D022D;
}

.accordion-header::after {
  content: '►';
  position: absolute;
  right: 1em;
  transition: transform .2s ease;
}

.accordion-header.active::after {
  transform: rotate(90deg);
}

.accordion-content {
  display: none;
}

.accordion-header.active + .accordion-content {
  display: block;
}

.accordion-content-item {
  position: relative;
  background-color: #6D006D;
}

.accordion-content-item:hover {
  background-color: #4B004B;
}

.accordion-link {
  display: block;
  padding-right: 1.2em;
  text-decoration: none;
  transition: transform .1s ease;
}

.accordion-link:hover {
  transform: translateX(.2em);
}
View Compiled
const accordionHeaders = document.querySelectorAll('.accordion-header')

const toggleActive = event => {
  event.currentTarget.classList.toggle('active')
}

const addToggleHandler = item => {
  item.addEventListener('click', toggleActive)
}

Array.from(accordionHeaders).forEach(addToggleHandler)
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.