Details

Details / summary elements

Native details and summary support.

Summary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan neque ipsum. Nunc ligula eros, elementum sit amet blandit eu, egestas at justo.

Heading

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.

Sub Heading

Cras maximus interdum interdum. Maecenas vitae ligula et eros porta feugiat. Nullam facilisis odio non ante varius tempor ut ac turpis.

<section>
  <details>
    <summary>
      <h3>Summary</h3>
    </summary>
    <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>
  </details>
  <details>
    <summary>
      <h3>Heading</h3>
    </summary>
    <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>
  </details>
</section>

Notes

  • Includes polyfill for older browsers
  • Use with headings to convey hierarchy if appropriate.

Component

Add .mzp-c-details to a section to collapse contents in to their headings.

Summary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan neque ipsum. Nunc ligula eros, elementum sit amet blandit eu, egestas at justo.

Heading

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.

Sub Heading

Cras maximus interdum interdum. Maecenas vitae ligula et eros porta feugiat. Nullam facilisis odio non ante varius tempor ut ac turpis.

<section class="mzp-c-details">
  <h3>Summary</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</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="../../../assets/protocol/protocol/js/protocol-details.js">
</script>

Notes

  • Assumes all content following a heading is intended to be hidden.
  • Only collapses headings highest in the hierarchy.

Custom expand and collapse

The functions driving the details and summary component can be called independently.

Heading

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.

Cras maximus interdum interdum. Maecenas vitae ligula et eros porta feugiat. Nullam facilisis odio non ante varius tempor ut ac turpis.

Heading

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.

Cras maximus interdum interdum. Maecenas vitae ligula et eros porta feugiat. Nullam facilisis odio non ante varius tempor ut ac turpis.

<style>
  /* Styling must be provided seperately, don't use these ones they're intentionally bad */
  .demo-section:before {
    color: #00A;
    content: 'Enlarge window to see Mzp.Details.destroy';
    display: block;
    font-weight: bold;
    margin-bottom: 20px;
  }

  @media (min-width: 767px) {
    .demo-section:before {
      content: 'Shrink window to see Mzp.Details.init';
    }
  }

  .demo-section button {
    border: none;
    background: #00A;
    color: #fff;
    font-size: 30px;
  }

  .demo-section button[aria-expanded=false]:after {
    content: " 👈";
  }

  .demo-section button[aria-expanded=true]:after {
    content: " 👇";
  }

  .demo-section .is-closed[aria-hidden=true] {
    display: none;
  }
</style>

<section class="demo-section">
  <h5 class="demo-heading">Heading</h5>
  <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>
  <p>Cras maximus interdum interdum. Maecenas vitae ligula
    et eros porta feugiat. Nullam facilisis odio non ante
    varius tempor ut ac turpis.</p>
  <h5 class="demo-heading">Heading</h5>
  <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>
  <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="../../../assets/protocol/protocol/js/protocol-details.js">
</script>
<script>
  (function() {
    'use strict';
    var _mqWide = matchMedia('(max-width: 767px)');
    if (_mqWide.matches) {
      window.Mzp.Details.init('.demo-heading');
    }
    _mqWide.addListener(function(mq) {
      if (mq.matches) {
        window.Mzp.Details.init('.demo-heading');
      } else {
        window.Mzp.Details.destroy('.demo-heading');
      }
    });
  })();
</script>

Notes

  • Styling must be provided seperately
  • Details can be initialized using Mzp.Details.init(selector, options), where options is an Object with the following properties:
    • onDetailsOpen [Function] callback when a details is opened (optional).
    • onDetailsClosed [Function] callback when a details is closed (optional).