From 511d269ff2d53c54cd75bfd3f0b602c23fceff2f Mon Sep 17 00:00:00 2001 From: Simon Rolfe Date: Wed, 1 Jul 2015 12:04:54 +0100 Subject: [PATCH 1/4] Add option to sync active tab from active accordion panel 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 }); --- bootstrap-tabcollapse.js | 21 +++++++++++++++++---- readme.md | 8 +++++++- 2 files changed, 24 insertions(+), 5 deletions(-) diff --git a/bootstrap-tabcollapse.js b/bootstrap-tabcollapse.js index 76e1279..a258c5a 100644 --- a/bootstrap-tabcollapse.js +++ b/bootstrap-tabcollapse.js @@ -36,8 +36,7 @@ '
' + '
' + ' ' + - '' - + ''; } }; @@ -81,7 +80,7 @@ }); if (!$('li').hasClass('active')) { - $('li').first().addClass('active') + $('li').first().addClass('active'); } var $panelBodies = this.$accordion.find('.js-tabcollapse-panel-body'); @@ -117,6 +116,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')); @@ -129,7 +139,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() { @@ -195,6 +205,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){ diff --git a/readme.md b/readme.md index 6871eb1..286d063 100644 --- a/readme.md +++ b/readme.md @@ -52,7 +52,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 ------------ From 48310e5c601f7df7ad672d0bfa7b52ab5bf80f93 Mon Sep 17 00:00:00 2001 From: Simon Rolfe Date: Wed, 1 Jul 2015 12:05:59 +0100 Subject: [PATCH 2/4] fix readme formatting --- readme.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/readme.md b/readme.md index 286d063..ade8766 100644 --- a/readme.md +++ b/readme.md @@ -55,10 +55,10 @@ You can also use multiple Bootstrap classes in order to, for example, show accor 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({ + $('#myTab').tabCollapse({ syncTabs: true }); - + Events ------------ From bcef8904910d8583fef047fc17934e5d81b4b935 Mon Sep 17 00:00:00 2001 From: Simon Rolfe Date: Wed, 1 Jul 2015 12:06:51 +0100 Subject: [PATCH 3/4] fix readme formatting again. I suck at markdown. --- readme.md | 1 + 1 file changed, 1 insertion(+) diff --git a/readme.md b/readme.md index ade8766..91ceace 100644 --- a/readme.md +++ b/readme.md @@ -55,6 +55,7 @@ You can also use multiple Bootstrap classes in order to, for example, show accor 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 }); From e06e8a88ae498317d063632050fe7942be95f555 Mon Sep 17 00:00:00 2001 From: "Matej Kriz (mattez)" Date: Fri, 14 Aug 2015 17:44:37 +0200 Subject: [PATCH 4/4] fix tab-panel opacity (in my case was opacity: 0) .fade.in opacity: 1 --- bootstrap-tabcollapse.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bootstrap-tabcollapse.js b/bootstrap-tabcollapse.js index a258c5a..ca73aee 100644 --- a/bootstrap-tabcollapse.js +++ b/bootstrap-tabcollapse.js @@ -124,7 +124,7 @@ tabId = tabId.substring(0, tabId.length - 9); //remove -collapse from identifier event.data.tabCollapse.getTabContentElement().find('.active').removeClass('active'); - $('#' + tabId).addClass('active'); + $('#' + tabId).addClass('active in'); } TabCollapse.prototype.showAccordion = function(){