Загрузочная панель Bootstrap по умолчанию

У меня есть панель с возможностью сбрасывания, но я хочу, чтобы она по умолчанию не была распакована.

<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>

Если я удалю крах из

<div id="collapse1" class="panel-collapse collapse">

Он работает, но в первый раз щелкнул, чтобы разблокировать не работает.

Ответ 1

В Bootstrap 3.x добавьте класс "в" к вашему сворачиваемому div

<div id="collapse1" class="panel-collapse collapse in">

Он по умолчанию сохранит ваш div.

Обновить:

С Bootstrap 4.0, Вам нужно добавить show класса вместо in.

Ответ 2

Добавьте класс in панель с идентификатором collapse1 как показано ниже.

<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>

Ответ 3

Вы можете использовать некоторые, чтобы удалить этот класс при загрузке окна

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

Ответ 4

класс "show" используется в bootstrap4