diff --git a/bootstrap-tabcollapse.js b/bootstrap-tabcollapse.js index 76e1279..0031cd4 100644 --- a/bootstrap-tabcollapse.js +++ b/bootstrap-tabcollapse.js @@ -24,6 +24,7 @@ }; TabCollapse.DEFAULTS = { + accordion: true, accordionClass: 'visible-xs', tabsClass: 'hidden-xs', accordionTemplate: function(heading, groupId, parentId, active) { @@ -138,9 +139,13 @@ $el.attr({ 'data-toggle-was': $el.attr('data-toggle'), 'data-toggle': 'collapse', - 'data-parent': '#' + parentId, - href: href + 'href': href }); + if ( this.options.accordion ) { + $el.attr({ + 'data-parent': '#' + parentId, + }); + } }); } @@ -161,9 +166,13 @@ $heading.addClass('js-tabcollapse-panel-heading ' + (active ? '' : 'collapsed')); $heading.attr({ 'data-toggle': 'collapse', - 'data-parent': '#' + parentId, 'href': '#' + groupId }); + if ( this.options.accordion ) { + $heading.attr({ + 'data-parent': '#' + parentId, + }); + } return $heading; }; diff --git a/readme.md b/readme.md index 6871eb1..d84f3d2 100644 --- a/readme.md +++ b/readme.md @@ -38,6 +38,14 @@ To activate tab collapse just include **bootstrap-tabcollapse.js** somewhere in $('#myTab').tabCollapse(); +By default tab collapse behave like accordion (always only active panel is visible / uncollapsed). +If you want to use simple collapse (more panels can be visible/uncollapsed at the same time), +set option "accordion" to "false": + + $('#myTab').tabCollapse({ + accordion: false + }); + If you want to specify the class that is given to accordion and tabs components you can do so by passing options to `tabCollapse`: $('#myTab').tabCollapse({