Добавить + / - к панелям Bootstrap Accordion в качестве индикатора переключения

Я хочу, чтобы заголовок группы мог расширяться в список или дерево с текстовым символом рядом с заголовком, который по умолчанию равен «+», «-» при расширении и переключается при отображении и скрытии состояния списка.

Как мне это сделать в bootstrap v.3?

http://jsbin.com/jakofugoxe/edit?html,css,output

.panel-heading[data-toggle="collapse"] {
  cursor: pointer;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
      <h4 class="panel-title">
        Collapsible Group 1
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
      <h4 class="panel-title">
        Collapsible Group 2
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse3">
      <h4 class="panel-title">
        Collapsible Group 3
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
  </div>
</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


html css twitter-bootstrap-3
person What'sUP    schedule 18.01.2017    source источник
comment
Покажите нам код?   -  person Chris    schedule 18.01.2017
comment
@ Крис, он засунул jsbin? Следует отметить, что у OP 3,7 тыс. повторений.   -  person Albert Renshaw    schedule 18.01.2017
comment
@AlbertRenshaw, вы должны добавить (соответствующий) код в сам вопрос.   -  person Chris    schedule 18.01.2017
comment
ОП: Причина, по которой мы не позволяем вам публиковать ссылки jsbin сами по себе, заключается в том, что вы должны добавлять код непосредственно в свое сообщение (а также, при желании, ссылку jsbin). Форматирование ссылки как кода для обхода этого ограничения противоречит цели и является неправильным. Пожалуйста, добавьте фактический код в сообщение.   -  person Madara's Ghost    schedule 18.01.2017

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете использовать псевдоэлемент :before или :after для рисования + или -:

Класс collapsed должен использоваться с .panel-heading внутри всех панелей, кроме активной. Bootstrap js переключает этот класс при нажатии на заголовки панелей, и мы можем использовать это для переключения между + и -.

HTML:

<div class="panel panel-default">
  <div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
                      <!--  ^^^ This class should be present on panel headings
                                inside all panels except the one that is active. -->
    <h4 class="panel-title">Collapsible Group 2</h4>
  </div>
  <div id="collapse2" class="panel-collapse collapse">
    <div class="panel-body">Lorem ipsum dolor sit amet</div>
  </div>
</div>

Необходимый CSS:

.panel-default>.panel-heading {
  padding-right: 30px;
  position: relative;
}

.panel-default>.panel-heading:after {
  content: '-';
  position: absolute;
  font-size: 20px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.panel-default>.panel-heading.collapsed:after {
  content: '+';
}


@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

.panel-heading[data-toggle="collapse"] {
  cursor: pointer;
}

.panel-default>.panel-heading {
  padding-right: 30px;
  position: relative;
}

.panel-default>.panel-heading:after {
  content: '-';
  position: absolute;
  font-size: 20px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.panel-default>.panel-heading.collapsed:after {
  content: '+';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
        <h4 class="panel-title">
          Collapsible Group 1
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
        <h4 class="panel-title">
          Collapsible Group 2
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse3">
        <h4 class="panel-title">
          Collapsible Group 3
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
  </div>

person Mohammad Usman    schedule 18.01.2017