components/details-component/details-component.html

<section class="mzp-c-details">
  <h3>Heading One</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan
    neque ipsum. Nunc ligula eros, elementum sit amet blandit eu, egestas at
    justo.</p>

  <h3>Heading Two</h3>
  <p>Proin in dapibus nulla. Nam vitae est vitae tellus mollis eleifend in eu
    erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
    posuere cubilia Curae; Aenean feugiat ante porttitor purus elementum, eget
    vestibulum ex volutpat. Sed gravida convallis rutrum. Quisque pharetra eros
    eget malesuada vulputate.</p>
  <h4>Sub Heading</h4>
  <p>Cras maximus interdum interdum. Maecenas vitae ligula et eros porta feugiat.
    Nullam facilisis odio non ante varius tempor ut ac turpis.</p>
</section>

<script src="{{ '/protocol/js/details.js' | path }}"></script>

<script>
  // check if details is supported, if not, init this as a polyfill
  if (typeof window.MzpSupports !== 'undefined') {
      // not supported, add support
      if(!window.MzpSupports.details) {
          window.MzpDetails.init('summary');
      }
  }

  // init generic class indicating headings should be made into open/close component
  window.MzpDetails.init('.mzp-c-details > h2');
  window.MzpDetails.init('.mzp-c-details > h3');
  window.MzpDetails.init('.mzp-c-details > h4');
  window.MzpDetails.init('.mzp-c-details > h5');
  window.MzpDetails.init('.mzp-c-details > h6');
</script>