The Details component converts a section of content into a collapsible accordion, turning each heading into a control to expand or collapse all the content that comes after it. This simulates the functionality of the native <details> element, but can apply to any element.

Use the mzp-c-details on a container element and, when initialized, the JavaScript will do the rest.

  • Only collapses headings highest in the hierarchy. E.g., if the highest ranked heading is <h3>, all <h3>s will be converted and the content between them will be collapsed.
  • Assumes all content following a heading is intended to be hidden.
<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/protocol-details.js"></script>