The functions driving the Details component can be called independently for any container element. It won’t receive any styling without the Protocol classes so you’ll have to style it separately (styles in this demonstration are intentionally tacky).

Usage

You can initiate using a custom class name like so:

MzpDetails.init('.demo-heading');

Callbacks are supported for open and close events:

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

A custom component can also be destroyed using:

MzpDetails.destroy('.demo-heading');
<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"></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>