MooTools MqShowHide

https://github.com/simonsmith/MooTools-MqShowHide

by Blink

HTML

<h1>Resize me</h1>

<div class="container">

    <p>Sizzle metus yippiyo, luctizzle izzle, dizzle izzle, sollicitudin at, crazy. Donizzle yo mamma, nisi crazy my shizz you son of a bizzle, neque bizzle funky fresh velit, mollis fringilla libero my shizz izzle purus. Class rizzle taciti sociosqu izzle litora tellivizzle boofron gizzle we gonna chung, pizzle the bizzle hymenaeos.</p>
    
    <p>Sizzle metus yippiyo, luctizzle izzle, dizzle izzle, sollicitudin at, crazy. Donizzle yo mamma, nisi crazy my shizz you son of a bizzle, neque bizzle funky fresh velit, mollis fringilla libero my shizz izzle purus. Class rizzle taciti sociosqu izzle litora tellivizzle boofron gizzle we gonna chung, pizzle the bizzle hymenaeos.</p>
    
</div>

CSS

body {
    font-family: sans-serif;
    font-size: .8em
}

p {
   margin-bottom: 10px;
   line-height: 1.4;         
}    

.container {
    width: 60%;
    margin: 2em auto;    
}   

h1 {
    font-size: 32px;
    text-align: center;
}

JavaScript

/*
 ---

 name: MqShowHide

 description: Show/Hides content based on media query. Provides toggling of content

 authors:
 Simon Smith

 license: MIT-style license.

 version: 1.0

 requires:
 - Core/Event
 - Core/Element
 - Core/Class
 - /MooTools.More
 - /Element.Shortcuts

 provides:
 - MqShowHide
 ...
 */

(function (name, global, definition) {
    if (typeof module !== 'undefined') module.exports = definition(name, global);
    else if (typeof define === 'function' && typeof define.amd  === 'object') define(definition);
    else global[name] = definition(name, global);
})('MqShowHide', this, function (name, global) {

    /* matchMedia() polyfill - http://goo.gl/HDNN5 */
    var matchMedia = global.matchMedia || Modernizr.mq || (function(doc){

        var bool,
            docElem  = doc.documentElement,
            refNode  = docElem.firstElementChild || docElem.firstChild,
            fakeBody = doc.createElement('body'),
            div      = doc.createElement('div');

        div.id = 'mq-test-1';
        div.style.cssText = "position:absolute;top:-100em";
        fakeBody.style.background = "none!important";
        fakeBody.appendChild(div);

        return function(q){

            div.innerHTML = '&shy;<style media="'+q+'"> #mq-test-1 { width: 42px; }</style>';

            docElem.insertBefore(fakeBody, refNode);
            bool = div.offsetWidth == 42;
            docElem.removeChild(fakeBody);

            return { matches: bool, media: q };
        };

    })(document);

    var instanceCount = 1;

    return new Class({

        Implements: [Options, Events],

        options: {
            trigger: {
                type: 'button',
                text: 'Show',
                altText: 'Hide',
                injectPos: 'bottom',
                attr: {
                    'class': 'show-hide-btn'
                }
            },
            wrapper: {
                type: 'div',
                attr: {
                    'class':...