danrcoull · November 18, 2016 16:09 · Oct 24, 2016 · Oct 24, 2016 · Oct 24, 2016 · Oct 24, 2016
diff --git a/Foundation6-TabToAccordion.js b/Foundation6-TabToAccordion.js
@@ -148,4 +148,4 @@ var tabsToAccordian = {
     }
 }
 
-tabsToAccordian.innit();
+tabsToAccordian.init();
diff --git a/Foundation6-TabToAccordion → Foundation6-TabToAccordion.js b/Foundation6-TabToAccordion → Foundation6-TabToAccordion.js
diff --git a/Foundatiion6-TabToAccordion → Foundation6-TabToAccordion b/Foundatiion6-TabToAccordion → Foundation6-TabToAccordion
diff --git a/Foundatiion6-TabToAccordion b/Foundatiion6-TabToAccordion
@@ -1,6 +1,6 @@
-Add the below To any Foundation 6 theme and change the iniialUlClass to whatever your tab ul class is. 
+## 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]>
 
-```js
 var tabsToAccordian = {
 
     initialUlClass: '.easytabs',
@@ -148,10 +148,4 @@ var tabsToAccordian = {
     }
 }
 
-```
-
-Then call the class with 
-
-```js
 tabsToAccordian.innit();
-```
diff --git a/Foundatiion6-TabToAccordion b/Foundatiion6-TabToAccordion
@@ -0,0 +1,157 @@
+Add the below To any Foundation 6 theme and change the iniialUlClass to whatever your tab ul class is. 
+
+```js
+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;
+    }
+}
+
+```
+
+Then call the class with 
+
+```js
+tabsToAccordian.innit();
+```
No results found