Merge pull request #1 from simonrolfe/master

Add option to sync active tab from active accordion panel

Author: mattez

bootstrap-tabcollapse.js

@@ -37,8 +37,7 @@
                     '       <div class="panel-body js-tabcollapse-panel-body">' +
                     '       </div>' +
                     '   </div>' +
-                    '</div>'
-
+                    '</div>';
         }
     };
 
@@ -82,7 +81,7 @@
         });
 
         if (!$('li').hasClass('active')) {
-            $('li').first().addClass('active')
+            $('li').first().addClass('active');
         }
 
         var $panelBodies = this.$accordion.find('.js-tabcollapse-panel-body');
@@ -118,6 +117,17 @@
         return $tabContents;
     };
 
+    TabCollapse.prototype.tabSync = function (event) {
+        var tabId = event.data.tabCollapse.$accordion.find('.panel-collapse.in').attr('id');
+        if (tabId === undefined || tabId === null) {
+            return;
+        }
+        tabId = tabId.substring(0, tabId.length - 9); //remove -collapse from identifier
+
+        event.data.tabCollapse.getTabContentElement().find('.active').removeClass('active');
+        $('#' + tabId).addClass('active');
+    }
+
     TabCollapse.prototype.showAccordion = function(){
         this.$tabs.trigger($.Event('show-accordion.bs.tabcollapse'));
 
@@ -130,7 +140,7 @@
             view.$accordion.append(view._createAccordionGroup(view.$accordion.attr('id'), $heading.detach()));
         });
 
-        if(this.options.updateLinks) {
+        if (this.options.updateLinks) {
             var parentId = this.$accordion.attr('id');
             var $selector = this.$accordion.find('.js-tabcollapse-panel-body');
             $selector.find('[data-toggle="tab"], [data-toggle="pill"]').each(function() {
@@ -204,6 +214,9 @@
         this.$tabs.after(this.$accordion);
         this.$tabs.addClass(this.options.tabsClass);
         this.getTabContentElement().addClass(this.options.tabsClass);
+        if (this.options.syncTabs) {
+            this.$accordion.on('shown.bs.collapse', { tabCollapse: this }, this.tabSync);
+        }
     };
 
     TabCollapse.prototype._createAccordionGroup = function(parentId, $heading){

readme.md

@@ -60,6 +60,13 @@ You can also use multiple Bootstrap classes in order to, for example, show accor
         tabsClass: 'hidden-sm hidden-xs',
         accordionClass: 'visible-sm visible-xs'
     });
+	
+By default, accordion panels do not sync with tabs: the correct panel will be shown based on the active tab, but changing the active accordion panel does not change the active tab.
+To enable tab syncing, pass options as follows:
+
+    $('#myTab').tabCollapse({
+        syncTabs: true
+    });
 
 Events
 ------------