Bootstrap uncollapsed panel by default

Twitter Bootstrap

Twitter Bootstrap Problem Overview


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.

Twitter Bootstrap Solutions


Solution 1 - Twitter Bootstrap

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.

Solution 2 - Twitter Bootstrap

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

Solution 3 - Twitter Bootstrap

Add a class in to the panel with id collapse1 like below

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<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 in">
        <div class="panel-body">First round details</div>

    </div>
</div>

Solution 4 - Twitter Bootstrap

<div class="collapse in show" id="collapseExample">

Solution 5 - Twitter Bootstrap

You could use some js to remove the class on window load

$(window).load(fumction() {
     $("#collapse1").removeClass("collapse");
});

Solution 6 - Twitter Bootstrap

Add [closeOthers]="true" under accordion and [isOpen]="true" under accordion group

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionEddyGView Question on Stackoverflow
Solution 1 - Twitter BootstrapKamlesh AryaView Answer on Stackoverflow
Solution 2 - Twitter BootstrapmaelgaView Answer on Stackoverflow
Solution 3 - Twitter BootstrapShubham KhatriView Answer on Stackoverflow
Solution 4 - Twitter Bootstrapmostafa kazemiView Answer on Stackoverflow
Solution 5 - Twitter BootstrapWeb Dev GuyView Answer on Stackoverflow
Solution 6 - Twitter BootstrapradsinView Answer on Stackoverflow