JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
      
      <ul class="list">
        <li class="item">
          <span class="trigger">trigger</span>
          <ul class="list_inner">
            <li class="item_inner">inner</li>
            <li class="item_inner">inner</li>
            <li class="item_inner">inner</li>
            <li class="item_inner">inner</li>
          </ul>
        </li>
        <li class="item">
          <span class="trigger">trigger</span>
          <ul class="list_inner">
            <li class="item_inner">inner</li>
            <li class="item_inner">inner</li>
            <li class="item_inner">inner</li>
            <li class="item_inner">inner</li>
          </ul>
        </li>
        <li class="item">
          <span class="trigger">trigger</span>
          <ul class="list_inner">
            <li class="item_inner">inner</li>
            <li class="item_inner">inner</li>
            <li class="item_inner">inner</li>
            <li class="item_inner">inner</li>
          </ul>
        </li>
      </ul>

CSS

.wrapper {
  width: 300px;
}
.wrapper .list {
  margin: 0;
  padding: 0;
}
.wrapper .list .item {
  list-style-type: none;
}
.wrapper .trigger {
  cursor: pointer;
  display: block;
  background-color: #eee;
}
.wrapper .trigger.visible {
  background-color: #000;
}
.wrapper .list_inner {
  margin: 0;
  padding: 0;
  display: none;
}
.wrapper .list_inner.visible {
  display: block;
  background-color: #000;
}
.wrapper .list_inner .item_inner {
  list-style-type: none;
  background-color: #716d66;
}

JavaScript

'use strict';

var triggers = document.querySelectorAll('.trigger');
var items = document.querySelectorAll('.list_inner');

[].forEach.call(triggers, function (trigger, index) {
    trigger.addEventListener('click', function () {
        items[index].classList.toggle('visible');
    });
});