Bootstrap Collapse Accordion - Default Expand/Collapse

Bootstrap uncollapsed panel by default

In Bootstrap 3.x, add a class "in" to your collapsable div

<div id="collapse1" class="panel-collapse collapse in">

It will keep your div open by default.

Update:

With Bootstrap 4.0, You need to add show class in place of in.

Bootstrap Accordion - start all closed

Boostrap 3

Just remove .in from panel1.

<div id="panel1" class="panel-collapse collapse">
<div class="panel-body">Contents panel 1</div>
</div>

Bootstrap 4

See @Syed Sajid's answer

Bootstrap 4 Collapse Accordion - always have one panel open

You can use the collapse hidden event. In this case, use .eq(0) since 0 is the index of the first collapsible div.

$('.collapse').on('hidden.bs.collapse', function () {
$('.collapse').eq(0).collapse('show');
})

To take it a step further, you could add a new default data variable to the parent #accordion...

<div id="accordion" class="accordion" data-default="1">..</div>

And, then change the jQuery to use that variable..

/* default accordion variable method */
$('.collapse').on('hidden.bs.collapse', function () {
var defaultDiv = $($(this).data("parent")).data("default");
$('.collapse').eq(defaultDiv-1).collapse('show');
})

Demo: https://www.codeply.com/go/NilPIQD9oi


Another option is to prevent any open accordion from closing itself, as I explained in this answer.

Bootstrap Accordion Expand/Collapse All not functioning properly

The problem is that the state of all panels is different than the state of any single panel because of the way accordion works with data-parent. Your expand/collapse all button handler needs to completely override that normal accordion behavior.

The expand/collapse all click handler must keep track of the last state (expand all or collapse all), because the Bootstrap Collapse component is seperately handing the state of each single panel (only one open at a time). Otherwise, there would be no way to know whether to open or close the individually toggled panels.

$('#expandAllFormats').on('click', function () {

if ($(this).data("lastState") === null || $(this).data("lastState") === 0) {

// close all
$('.collapse.in').collapse('hide');

// next state will be open all
$(this).data("lastState",1);
$(this).text("Expand All");

}
else {

// initial state...
// override accordion behavior and open all
$('.panel-collapse').removeData('bs.collapse')
.collapse({parent:false, toggle:false})
.collapse('show')
.removeData('bs.collapse')
// restore single panel behavior
.collapse({parent:'#accordionFormat', toggle:false});

// next state will be close all
$(this).data("lastState",0);
$(this).text("Collapse All");
}

});

http://codeply.com/go/76Hl6s49rb

OFC, another way is to simply remove the data-parent= attributes and completely disable the accordion behavior.

bootstrap accordion default collapse all and working like flipkart refine search

According to the accordion documentation you can set:

  • toggle to false for each panel-collapse
  • show each panel-collapse
  • on each hide/show accordion event you can toggle the class

The example:

$('.panel-collapse').collapse({    toggle: false}).collapse('show');
$('#accordion').on('hide.bs.collapse show.bs.collapse', function (e) { $(e.target).prev('div').find('.glyphicon').toggleClass('glyphicon-menu-down glyphicon-menu-up');})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://code.jquery.com/jquery-2.1.1.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container"> <div class="row"> <div class="col-sm-3 col-md-3"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span> </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life...... </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span> </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> Anim pariatur cliche reprehenderit, ..... </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span> </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> Anim pariatur cliche reprehenderit, ..... </div> </div> </div> </div> </div> </div></div>

Accordion, how to automatically collapse one and expand next

you could find a working solution in this snippet. The idea is to manually manipulate the bootstrap collapse elements.

$(document).ready(function() {  // Add minus icon for collapse element which is open by default  $(".collapse.in").each(function() {    $(this).siblings(".panel-heading").find(".glyphicon").addClass("rotate");  });
// Toggle plus minus icon on show hide of collapse element $(".collapse").on('show.bs.collapse', function() { $(this).parent().find(".glyphicon").addClass("rotate"); }).on('hide.bs.collapse', function() { $(this).parent().find(".glyphicon").removeClass("rotate"); });});
$(document).on("change", "#textfield", function(){ $("#collapseOne").collapse('hide'); $("#collapseTwo").collapse('show');});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="bs-example"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-menu-right"></span> Text</a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> <div class="row"> <div class="col-sm-3"> <label for="text">Text</label> </div> <div class="col-sm-1"></div> <div class="col-sm-8"> <input type="text" class="form-control" id="textfield" ng-model="textfield" ng-blur="c.updatedField()"> <br /> </div> </div> </div> </div> </div>
<div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-menu-right"></span> More text</a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> <h4 class="panel-title">More text</h4>
</div> </div> </div>
<div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-menu-right"></span> Even more text</a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> <h4 class="panel-title">More text</h4> </div> </div> </div> </div></div>

bootstrap accordion expand only when clicked on arrow

.accordion-button {
pointer-events: none;
}

.accordion-button::after {
pointer-events: all;
}

add this code to your css.



Related Topics



Leave a reply



Submit