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
How to Make Bootstrap Icon Display Inline with Text in a Tag
CSS Transform Square into Thinner Rhombus
Highlighting All Rowspans Within a Table Row Using CSS Only
Child Take Width % from Parents Parent
Flexbox Align Items Horizontally
Intellij Idea 11: How to Compile .CSS from .Less
Using Flexbox Sticky Footer with Bootstrap
Which Framework Is Best for Starting with Responsive Web Design
How to Highlight a Selected Row in *Ngfor
Horizontal Scrollbar Only Appearing at Bottom of Page
Background Color for Text (Only)
Helvetica Neue' and Helvetica Font
How to Rotate a Font Icon 45 Degrees
CSS: Nth-Of-Type() and: Not() Selector
Svg as a CSS Background - How to Repeat-X with No Space in Between
CSS - Border Radius and Solid Border Curved Inside
Make Element Width Stretch to Fit Its Children When Element's Parent Has Overflow: Auto;