Simple Accordion (built using Hammer JS and TweenLite)

accordion.js

/*
 * Accordion functionality
 */
const accordion = (() => {
    const COLLAPSED = '0';
    const EXPANDED = '1';
    let curItem;
    let prevItem;
    let items;
    const _accordion = {
        init: () => {
            let accordion;
            accordion = document.querySelector('.accordion');

            if (!!accordion) {
                items = accordion.querySelectorAll('.accordion-item');

                items.forEach((item, i) => {
                    const header = item.querySelector('.accordion-header');
                    const mc = new Hammer(header);
                    if (i===0) {
                        curItem = header.nextElementSibling;
                        _accordion.setExpanded(curItem);
                    }

                    if (layout.current() === 'mobile') {
                        mc.on('tap', _accordion.handleItemClick);
                        header.removeEventListener('click',  _accordion.handleItemClick);
                    } else {
                        header.addEventListener('click', _accordion.handleItemClick);
                        mc.off('tap', _accordion.handleItemClick);
                    }
                });
            }
        },

        handleItemClick: (e) => {
            const header = e.target;
            const content = header.nextElementSibling;
            const expanded = content.getAttribute('data-expanded');
            prevItem = curItem;
            curItem = content;

            switch(expanded) {
                case COLLAPSED: {
                    if (prevItem !== curItem) {

                        _accordion.setCollapsed(prevItem);
                    }
                    _accordion.setExpanded(curItem);
                    break;
                }
                case EXPANDED: {
                    _accordion.setCollapsed(curItem);
                    break;
                }
            }
        },

        setExpanded: (item, timing) => {
            timing = !!timing ? timing : 0.3;
            item.setAttribute('data-expanded', EXPANDED);
            item.previousElementSibling.setAttribute('data-expanded', EXPANDED);
            _accordion.expandSection(item, timing);
        },

        setCollapsed: (item, timing) => {
            timing = !!timing ? timing : 0.3;
            item.setAttribute('data-expanded', COLLAPSED);
            item.previousElementSibling.setAttribute('data-expanded', COLLAPSED);
            _accordion.collapseSection(item, timing);
        },

        expandSection: (el ,timing) => {
            TweenLite.set(el, { height: 'auto' });
            TweenLite.from(el, timing, { height: 0 });
        },

        collapseSection: (el, timing) => {
            TweenLite.to(el, timing, { height: 0 });
        }
    };

    return _accordion;
})();

accordion.init();

markup-structure.html

 <ul class="accordion">
    <li class='accordion-item'>
        <div class="accordion-header" data-expanded="0">Heading</div>
        <div class="accordion-content" data-expanded="0">Content</div>
    </li>
    <!-- additional items -->
</ul>