Аккордеон с увеличивающейся шириной - PullRequest
Новая
       68

Аккордеон с увеличивающейся шириной

0 голосов
/ 20 сентября 2018

У меня на сайте аккордеон jQuery со всеми открытыми вкладками

Мне нужно, чтобы ширина закрытых вкладок (когда они закрыты) увеличивалась в порядке их закрытия

Пример здесь enter image description here

То, что я хочу сделать, это то, что если есть 10 вкладок и только первые 2 закрыты, ширина tab1 должна быть95% & tab2 должно быть 100%.Если вкладка 3 закрыта, ширина tab1 = 90%, tab2 = 95% & tab3 = 100%.

Вот что я пробовал:

Я добавил jQuery, который переключает классclosed к закрытой вкладке и попытался использовать nth-last-child для этого, например 

.tab.closed:nth-last-child(1) {
  width: 100%
}

.tab.closed:nth-last-child(2) {
  width: 95%
}

Но происходит то, что псевдокласс добавляется к основному классу вкладки, а не только к вкладкамс классом closed.

Логичен ли этот метод?Или есть какой-нибудь лучший способ сделать это?

Редактировать: Добавлен фрагмент ниже. 

$('.panel-title a').click(function() {
  if ($('.collapse').hasClass('in')) {
    $(this).closest('.panel.panel-white').toggleClass("open");
    $(this).closest('.panel.panel-white').toggleClass("closed");
  }
});
.panel.panel-white .panel-heading {
  background: #0769AD;
}

.panel.panel-white .panel-heading a {
  color: white
}

.closed:nth-last-child(1) {
  width: 80%;
}

.closed:nth-last-child(1) {
  width: 80%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="panel-group content-group-lg">
  <div class="panel panel-white open">
    <div class="panel-heading">
      <h6 class="panel-title">
        <a data-toggle="collapse" href="#collapse-group1">Collapsible Item #1</a>
      </h6>
    </div>
    <div id="collapse-group1" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
      </div>
    </div>
  </div>

  <div class="panel panel-white closed">
    <div class="panel-heading">
      <h6 class="panel-title">
        <a class="collapsed" data-toggle="collapse" href="#collapse-group2">Collapsible Item #2</a>
      </h6>
    </div>
    <div id="collapse-group2" class="panel-collapse collapse">
      <div class="panel-body">
        Тon cupidatat skateboard dolor brunch. Тesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda.
      </div>
    </div>
  </div>

  <div class="panel panel-white closed">
    <div class="panel-heading">
      <h6 class="panel-title">
        <a class="collapsed" data-toggle="collapse" href="#collapse-group3">Collapsible Item #3</a>
      </h6>
    </div>
    <div id="collapse-group3" class="panel-collapse collapse">
      <div class="panel-body">
        3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it.
      </div>
    </div>
  </div>
</div>
<!-- /basic collapsible -->
...