Skip to content

Instantly share code, notes, and snippets.

@julianxhokaxhiu
Last active November 18, 2015 11:51
Show Gist options
  • Save julianxhokaxhiu/f9555d7b295d17e5ad77 to your computer and use it in GitHub Desktop.
Save julianxhokaxhiu/f9555d7b295d17e5ad77 to your computer and use it in GitHub Desktop.
BS3 Collapse without IDs
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse-parent-next" href="#">
Collapsible Group Item #1
</a>
</h4>
</div>
<div class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse-parent-next" href="#">
Collapsible Group Item #2
</a>
</h4>
</div>
<div class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse-parent-next" href="#">
Collapsible Group Item #3
</a>
</h4>
</div>
<div class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
jQuery(function($){
var collapse = function(opt) {
var $target = $(this).closest('.panel-heading').next();
if ( $target.data('bs.collapse') ) {
$target
.collapse('toggle');
} else {
$target
// Toggle active class to the element
.on('show.bs.collapse hide.bs.collapse', function(e){
var panel = $(e.target).closest('.panel');
if ( e.type == 'hide')
panel
.removeClass( 'panel-active' );
else if ( e.type == 'show' )
panel
.addClass( 'panel-active' )
if ( $(this).data( 'toggle' ) == 'collapse-parent-next' )
panel
.siblings()
.removeClass( 'panel-active' );
})
.collapse(opt);
}
}
// Get rid of the IDs for the collapse plugin of BS3
// Url: http://stackoverflow.com/questions/12805825/can-you-specify-a-data-target-for-bootstrap-which-refers-to-a-sibling-dom-elem
$('body')
// This one collapse items as an "accordion"
.on('click.collapse-parent-next.data-api', '[data-toggle=collapse-parent-next]', function (e) {
e.preventDefault();
collapse
.apply(this, [
{
'parent': $(this).closest('.panel-group')
}
]);
})
// This one collapse items separately without closing the others
.on('click.collapse-next.data-api', '[data-toggle=collapse-next]', function (e) {
e.preventDefault();
collapse
.apply(this);
})
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment