COLLAPSE: Vanilla JS/CSS/HTML to Emulate BS5 Collapse Utility

Here's some vanilla JS and related code to make bootstrap style collapses.

HTML:

Use data-collapse-target to point to the target element and make the ID of the target element the same as what the data-collapse-target is pointing to.

<p data-collapse-toggle data-collapse-target="#collapse-example" style="cursor: pointer;">
  Click to Open Collapse
</p>
<div id="collapse-example" class="u-collapse" data-collapse hidden>
	... Content hidden in the collapse ...
</div>

CSS:

.u-collapse {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}
.u-collapse.is-open {
  max-height: 1000px; /* comfortably larger than your tallest expected table */
}
.u-collapse[hidden] {
  display: none;
}

JS:

<script>
(function (window, document, undefined) {
  'use strict';
  function toggleCollapse(trigger) {
	var targetSelector = trigger.getAttribute('data-collapse-target');
	if (!targetSelector) return;
	var target = document.querySelector(targetSelector);
	if (!target) return;
	var isOpen = target.classList.contains('is-open');
	if (isOpen) {
	  target.classList.remove('is-open');
	  trigger.classList.remove('is-active');
	  trigger.setAttribute('aria-expanded', 'false');
	  target.setAttribute('hidden', '');
	} else {
	  target.removeAttribute('hidden');
	  // Force reflow so the transition actually fires
	  target.offsetHeight;
	  target.classList.add('is-open');
	  trigger.classList.add('is-active');
	  trigger.setAttribute('aria-expanded', 'true');
	}
  }
  document.addEventListener('click', function (evt) {
	var trigger = evt.target.closest('[data-collapse-toggle]');
	if (!trigger) return;
	evt.preventDefault();
	toggleCollapse(trigger);
  });
  // Initialize aria attributes on load
  document.querySelectorAll('[data-collapse-toggle]').forEach(function (trigger) {
	var targetSelector = trigger.getAttribute('data-collapse-target');
	var target = targetSelector ? document.querySelector(targetSelector) : null;
	trigger.setAttribute('aria-expanded', target && target.classList.contains('is-open') ? 'true' : 'false');
	if (targetSelector) {
	  trigger.setAttribute('aria-controls', targetSelector.replace('#', ''));
	}
  });
})(window, document);
</script>