Bootstrap uncollapsed panel by default

问题

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.

回答1:

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.

回答2:

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

回答3:

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>

回答4:

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

回答5:

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

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

回答6:

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

来源：https://stackoverflow.com/questions/42688320/bootstrap-uncollapsed-panel-by-default

标签

twitter-bootstrap