Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Foundation 6 - Convert Tabs to Accordion on small Screens.
## Description Add the below To any Foundation 6 theme and change the iniialUlClass to whatever your tab ul class is.
## Author : Daniel Coull <ttechitsolutions@gmail.com>
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();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.