Details

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

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

<style>
  /* Styling must be provided separately. 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>