PureJS collapse from bootstrap

vinilla-collapse.html

<style>
  *, ::after, ::before {
    box-sizing: border-box;
}
.collapse {
  display: block;
  max-height: 0px;
  overflow: hidden;
  transition: max-height .5s cubic-bezier(0, 1, 0, 1);
&.show {
    max-height: 99em;
    transition: max-height .5s ease-in-out;
  }
}

</style>

<script>


  
  // self executing function here
(function() {
    
  
// Handler that uses various data-* attributes to trigger
// specific actions, mimicing bootstraps attributes
var triggers = Array.from(document.querySelectorAll('[data-toggle="collapse"]'));

window.addEventListener('click', ev => {
  var elm = ev.target;
  if (triggers.includes(elm)) {
    var selector = elm.getAttribute('data-target');
    collapse(selector, 'toggle');
  }
}, false);


var fnmap = {
  'toggle': 'toggle',
  'show': 'add',
  'hide': 'remove' };

var collapse = (selector, cmd) => {
  var targets = Array.from(document.querySelectorAll(selector));
  targets.forEach(target => {
    target.classList[fnmap[cmd]]('show');
  });
};

})();
  
</script>

<div>
<button 
  class="btn btn-primary btn__first" 
  data-toggle="collapse"
  data-target=".collapse.first"
  data-text="Collapse">
  Toggle First
</button>
  
  
  <div class="collapse first">
 
   <!-- content -->
  </div>

</div>