JavaSript, Toggle a panel

hider-shower.js

'use strict';
define(function() {

    /**
     * Toggles a drawer panel
     *
     * Click a button and a drawer is shown, click elswhere and it's closed,
     * open it when element inside the drawer is focused with a keyboard.
     *
     * @param  {string} trigger      ID, class, or element name to the button that toggles the drawer
     * @param  {string} drawer       ID, class, or element name to the drawer element
     * @param  {string} drawerParent ID of the drawer parent element
     * @param  {string} activeClass  Class name to toggle in the element
     */
    return function(trigger, drawer, drawerParent, activeClass) {

        var drawerBare = drawer.replace(/\.|#/g, ''),
            drawerIsFocused, drawerShower, closest;

        trigger = document.querySelector(trigger);
        drawer = document.querySelector(drawer);

        // The minimalistic closest function
        closest = function(elem, fn) {
            return elem && (fn(elem) ? elem : closest(elem.parentNode, fn));
        };

        // Check if any elements inside the drawer are focused
        drawerIsFocused = function(e) {
            // Get the closest
            var closestEl = closest(e.target, function(elem) {
                return elem.id === drawerBare;
            });

            if (!closestEl) {
                drawer.classList.remove(activeClass);
            } else {
                drawer.classList.add(activeClass);
            }
        };

        // Drawer shower/hider
        drawerShower = function(e) {
            // Get the closest
            var closestEl = closest(e.target, function(elem) {
                return elem.id === drawerParent;
            });

            // If the trigger is clicked
            if (e.target.id === trigger.id) {
                drawer.classList.toggle(activeClass);
                trigger.classList.toggle(activeClass);
            }

            // Close if anywhere else is clikced
            if (!closestEl) {
                drawer.classList.remove(activeClass);
                trigger.classList.remove(activeClass);
            } else {
                trigger.classList.add(activeClass);
            }
        };

        // Bind all the function to events
        if (document.addEventListener) {
            document.addEventListener('focus', drawerIsFocused, true);
            document.addEventListener('click', drawerShower);
        } else {
            // This is for IE8, it might not work... I haven't tested it
            document.attachEvent('onfocus', drawerIsFocused);
            document.attachEvent('onclick', drawerShower);
        }
    };
});