Mozilla Protocol
  • 22.0.0

Details Component

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 it instead of the native element when the collapsible content has headings, so the headings stay available to heading navigation.

Usage

Import using Webpack as an ES module:

import MzpDetails from '@mozilla-protocol/core/protocol/js/details';

Import using Webpack as CommonJS:

const MzpDetails = require('@mozilla-protocol/core/protocol/js/details');

Import as a global variable via a <script> tag:

const MzpDetails = window.MzpDetails;

Then initialize the component:

// 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');

Dependencies

The Details component depends on both the MzpSupports and MzpUtils libraries for feature detection and DOM traversal. It is recommended that both are included in your page and accessible via a global object before loading your Details component script.

import MzpSupports from '@mozilla-protocol/core/protocol/js/supports';
import MzpUtils from '@mozilla-protocol/core/protocol/js/utils';

window.MzpSupports = MzpSupports;
window.MzpUtils = MzpUtils;

Tips

  • Make sure to initialize the component after the DOM has loaded.
  • 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/details.js"></script>

<script>
  // 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>