components/details-component/details-component--custom.html

<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 MzpDetails.destroy';
    display: block;
    font-weight: bold;
    margin-bottom: 20px;
  }

  @media (min-width: 767px) {
    .demo-section:before {
      content: 'Shrink window to see MzpDetails.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 One</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 Two</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>
  <h6>Sub-heading</h6>
  <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' | path }}"></script>

<script>
(function() {
  'use strict';
  var _mqWide = matchMedia('(max-width: 767px)');

  if (_mqWide.matches) {
    window.MzpDetails.init('.demo-heading', {
      onDetailsOpen: function(){
        console.log('open');
      },
      onDetailsClose: function(){
        console.log('close');
      }
    });
  }

  _mqWide.addListener(function(mq) {
    if (mq.matches) {
      window.MzpDetails.init('.demo-heading', {
        onDetailsOpen: function(){
          console.log('open');
        },
        onDetailsClose: function(){
          console.log('close');
        }
      });
    } else {
      window.MzpDetails.destroy('.demo-heading');
    }
  });
})();
</script>