Сделать аккордеон закрытым по умолчанию в Bootstrap

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

вот мой код: 

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="false">
    <c:forEach items="${proposals}" var="proposal" varStatus="serial">
        <div class="panel panel-default">

            <div class="panel-heading" role="tab" id="heading${proposal.propID}"  >
                <h4 class="panel-title">
                    <span class="fa fa-paperclip" aria-hidden="true"></span>
                    <a class="accordion-toggle collapsed" 
                       data-toggle="collapse" data-parent="#accordion"
                       href="#collapse${proposal.propID}" aria-expanded="false"
                       aria-controls="collapse${proposal.propID}"> 
                           ${proposal.title} 
                    </a>
                </h4>
            </div>

            <div id="collapse${proposal.propID}" class="panel-collapse collapse in"
                 role="tabpanel" aria-labelledby="heading${proposal.propID}">
                ${proposal.interest}
            </div>

        </div>
    </c:forEach> 
</div>

Я тоже aria-expanded="false", но это не работает.

в чем ошибка?

6
accordion collapse twitter-bootstrap

1 ответов

эта строка, похоже, является виновником:

<div id="collapse${proposal.propID}" class="panel-collapse collapse in" ...

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

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          This Panel is Open By Default
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Open
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          This Panel Is Closed By Default
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Closed
      </div>
    </div>
  </div>
</div>

обратите внимание, что на первой панели нет class=collapsed на <a> тег, и тег in класса по <div> tag и начинает открываться. Вторая панель переключает их и запускает ЗАКРЫТЫЙ.

редактировать

Не может сделать Bootply, продолжайте получать "ошибку приложения".

17