JSFiddle - React, Tailwind, and code Playground

by ronilan

HTML

// Accordion

CSS

div.cat {
  background: #999;
  padding: 30px 10px 10px 10px;
  margin: 10px;
}

div.sub {
  background: #666;
  padding: 10px;
  margin: 2px;
}

[data-item-status='collapsed'] {
  display: none;
}

JavaScript

var accordion = [{'aaa' : {
  item_a1: "1",
  item_a2: "2",
  item_a3: "3"
}}, { 'bbb' : {
  item_b1: "1",
  item_b2: "2",
  item_b3: "3"
}}, { 'ccc' : {
  item_c1: "1",
  item_c2: "2",
  item_c3: "3"
}}];

function buildAccordion(data) {

  function listen() {

    document.addEventListener('click', function(e) {

      if (e.target.id.substr(0, 4) === 'cat-') {
        var els = document.getElementById(e.target.id).childNodes

        // note this is forEach on node list not yet supported...
        els.forEach(function(el) {
          el.tagName === 'DIV' ? toggleItemStatus(el) : null;
        });

      }
    })

  }

  function toggleItemStatus(el) {

    var status = el.getAttribute('data-item-status');
    status === 'collapsed' ? status = 'open' : status = 'collapsed';
    el.setAttribute('data-item-status', status)
  }

  function render(data) {

    var el;
    var subEl;
    var i = 0;

    data.forEach(function(item) {
      el = document.createElement('div');
      el.innerText = Object.keys(item)
      el.className = 'cat';
      el.id = 'cat-' + i;

      Object.keys(item[el.innerText]).forEach(function(key) {

        subEl = document.createElement('div');
        subEl.className = 'sub';
        subEl.setAttribute('data-item-status', 'collapsed');
        subEl.innerText = key;
        subEl.id = key;
        el.appendChild(subEl)
      });

      document.body.appendChild(el);
      i++;
    });

  }

  render(data);
  listen();
}

buildAccordion(accordion)