Foundation 6 - Convert Tabs to Accordion on small Screens.

Foundation6-TabToAccordion.js

## Description Add the below To any Foundation 6 theme and change the iniialUlClass to whatever your tab ul class is. 
## Author : Daniel Coull <[email protected]>

var tabsToAccordian = {

    initialUlClass: '.easytabs',

    accordian: null,
    tabs:null,

    activeClass: 'is-active',

    accordianUlClass: 'accordion',
    accordianUlAttr: 'data-accordion',

    accordianItemAttr: 'data-accordion-item',
    accordianItemClass: 'accordion-item',

    accordianTitleClass: 'accordion-title',

    accordianContentClass: 'accordion-content',
    accordianContentAttr: 'data-tab-content',

    tabsUlClass: 'tabs',
    tabsUlAttr: 'data-tabs',

    tabsItemClass : 'tabs-title',
    tabsContentClass: 'tabs-panel',
    tabsMainContainer: 'tabs-content',

    init : function() {
        if (Foundation.MediaQuery.current == 'small') {
            this.toAccordian();
        }else
        {
            this.toTabs();
        }
    },
    toTabs: function() {
        if(!$j(this.initialUlClass).hasClass(this.tabsUlClass)) {

            this.destroyActive();

            //start at the main ul
            $j(this.initialUlClass)
                .removeClass(this.accordianUlClass)
                .addClass(this.tabsUlClass)
                .removeAttr(this.accordianUlAttr)
                .removeAttr('role')
                .attr(this.tabsUlAttr, '');

            $j('.'+this.accordianItemClass).each(function (index) {

                console.log(index);
                $j(this)
                    .removeClass(tabsToAccordian.accordianItemClass)
                    .removeClass(tabsToAccordian.activeClass)
                    .removeAttr('role')
                    .removeAttr(tabsToAccordian.accordianItemAttr)
                    .addClass(tabsToAccordian.tabsItemClass);

                tabsToAccordian.addActive(this, index);

                //get the corrisponding content by index (there should be x tabs x panels)
                var corrispondingContent = $j('.'+tabsToAccordian.accordianContentClass).eq(0);

                corrispondingContent
                    .removeClass(tabsToAccordian.accordianContentClass)
                    .removeClass(tabsToAccordian.activeClass)
                    .removeAttr(tabsToAccordian.accordianContentAttr)
                    .removeAttr('role')
                    .addClass(tabsToAccordian.tabsContentClass);

                tabsToAccordian.addActive('#'+corrispondingContent.attr('id'), index)

                $j(this).find('a').removeAttr('role aria-selected aria-expanded')
                    .removeClass(tabsToAccordian.accordianTitleClass);

                $j('.' + tabsToAccordian.tabsMainContainer).append(corrispondingContent);

            });
            this.tabs = new Foundation.Tabs($j(this.initialUlClass));
        }
    },
    toAccordian:function() {

        if(!$j(this.initialUlClass).hasClass(this.accordianUlClass)) {

            this.destroyActive();

            //start at the main ul
            $j(this.initialUlClass)
                .removeClass(this.tabsUlClass)
                .addClass(this.accordianUlClass)
                .removeAttr(this.tabsUlAttr)
                .removeAttr('role')
                .attr(this.accordianUlAttr, '');
            //then start at the titles

            $j('.'+this.tabsItemClass).each(function (index) {

                //main li construct
                $j(this)
                    .removeClass(tabsToAccordian.tabsItemClass )
                    .removeClass(tabsToAccordian.activeClass)
                    .removeAttr('style')
                    .attr(tabsToAccordian.accordianItemAttr, '')
                    .addClass(tabsToAccordian.accordianItemClass);

                tabsToAccordian.addActive(this, index);

                // get the corrisponding content by index (there should be x tabs x panels)
                var corrispondingContent = $j('.'+tabsToAccordian.tabsContentClass).eq(0);



                //mdify class and attr
                corrispondingContent
                    .addClass(tabsToAccordian.accordianContentClass)
                    .attr(tabsToAccordian.accordianContentAttr, '')
                    .removeAttr('role')
                    .removeClass(tabsToAccordian.tabsContentClass);

                console.log(corrispondingContent);

                //add the class to the title
                $j(this).find('a')
                    .removeAttr('role aria-selected aria-expanded')
                    .addClass(tabsToAccordian.accordianTitleClass)
                    .after(corrispondingContent);
            });

            var options = {multiExpand: false, allowAllClosed: true};
            this.accordian = new Foundation.Accordion($j(this.initialUlClass), options);
        }
    },
    destroyActive : function(){
        //destroy original component
        $j(this.initialUlClass).foundation('destroy');
        return this;
    },
    addActive : function(element, index) {
        if(index == 0)
        {
            $j(element).addClass('is-active');
        }
        return this;
    }
}

tabsToAccordian.init();