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).