app.js

require('./Toggleable');

mandatory.css

[hidden] { display: none !important; }

Toggleable.js

(function(window, document) {
  const rand = Math.random().toString(36).substr(2, 10);
  const openClassName = 'opened';
  const componentName = 'toggleable';
  const triggerName = 'toggleable-trigger';
  const wrapperName = 'toggleable-content';

  const addToggleButton = wrapper => {
    const button = document.createElement('button');
    const trigger = document.querySelector(`[${triggerName}]`);

    button.innerHTML = trigger.innerHTML;
    button.className = trigger.className;

    trigger.remove();
    wrapper.prepend(button);

    return button;
  }

  const makeToggleable = wrapper => {
    const button = addToggleButton(wrapper);
    button.setAttribute('aria-expanded', 'false');

    const toggleable = document.querySelector(`[${wrapperName}]`);
    toggleable.hidden = true;

    const toggle = function (open) {
      if (open !== undefined) {
        button.setAttribute('aria-expanded', open);
        toggleable.hidden = !open;
        open ? wrapper.classList.add(openClassName) : wrapper.classList.remove(openClassName);
      } else {
        let toggled = toggleable.hidden;
        button.setAttribute('aria-expanded', toggled);
        toggleable.hidden = !toggled;
        toggled ? wrapper.classList.add(openClassName) : wrapper.classList.remove(openClassName);
      }
    }

    if (! toggleable.id) {
      toggleable.id = `${wrapperName}-${rand}`;
    }

    button.setAttribute('aria-controls', toggleable.id);
    button.addEventListener('click', () => { toggle() })

    toggleable.removeAttribute(wrapperName);
    wrapper.removeAttribute(componentName);
    wrapper.id = `${componentName}-${rand}`;
    wrapper.classList.add(componentName);

    return { toggle };
  }

  const components = [...document.querySelectorAll(`[${componentName}]`)];
  components.forEach((comp, i) => { makeToggleable(comp) });

})(window, document);

yourfile.html

<div toggleable>
  <div toggleable-trigger>
    <!-- -->
  </div>
  <div toggleable-content hidden>
    <!-- -->
  </div>
</div>