Menu
I have a collapsable panel but I want it to be uncollapsed by default.
<div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" href="#collapse1"> <span class="glyphicon glyphicon-collapse-down"> </span>1st Round</a> </h4> </div> <div id="collapse1" class="panel-collapse collapse"> <div class="panel-body">First round details</div> </div> </div> If I remove collapse from
<div id="collapse1" class="panel-collapse collapse"> It works, but the first time clicked to uncollapse doesn't work.
789
If you've set the collapsible element to be open by default using the show class, set aria-expanded="true" on the control instead.
Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.
To create an accordion that is collapsed by default, we need to set the 'active' property of the jQuery Accordion as false. Syntax: $("#demoAccordion"). accordion({ collapsible: true, active: false});
Assuming that you're using Bootstrap 4, you can simply remove the data-parent attribute from the element with the collapse class. This subscribes the collapse to events on #accordionExample , which is the main accordion element, via the data-parent attribute.
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.
94
With Boostrap 4, simply add the class show to show the collapsed content on page load:
<div class="collapse show">...</div> As per Bootstrap 4 documention:
.collapse hides content .collapse.show shows content
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
