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.


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

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>

Tags:

Twitter Bootstrap

Recent Posts