загрузочный аккордеон все рухнул по умолчанию

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

Имейте в виду, что я делаю цикл для создания каждого из них, что может быть неактуально, поскольку я могу добавить другой идентификатор, класс в первом цикле не проблема, но просто стоит упомянуть об этом.

Итак, у меня есть это:

<div class="row">
<div class="panel-group" id="accordion">


<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Title1
</a>
</h5>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
Content1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Title2
</a>
</h5>
</div>
<div id="collapse2" class="panel-collapse collapse in">
<div class="panel-body">
Content2
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Title3
</a>
</h5>
</div>
<div id="collapse3" class="panel-collapse collapse in">
<div class="panel-body">
Content3
</div>
</div>
</div>
</div>
</div>

Тогда у меня есть следующий скрипт

<script>
$(function() {

var $active = true;

$('.panel-title > a').click(function(e) {
e.preventDefault();
});

$('.collapse-init').on('click', function() {
if(!$active) {
$active = true;
$('.panel-title > a').attr('data-toggle', 'collapse');
$('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});
$(this).html('Click to disable accordion behavior');
} else {
$active = false;
$('.panel-collapse.in').removeClass('in');
$('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});
$('.panel-title > a').removeAttr('data-toggle');
$(this).html('Click to enable accordion behavior');
}
});

});
</script>

Я возился с этим в редакторе Chrome, чтобы попытаться отредактировать класс от коллапса до коллапса и наоборот для них всех, но, кажется, ничто не заставляет его свернуть их всех. Один всегда остается открытым.

0

Решение

Просто удалите in класс от вашего <div id="collapse1" class="panel-collapse collapse in">

        <div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Title1
</a>
</h5>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
Content1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Title2
</a>
</h5>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
Content2
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Title3
</a>
</h5>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
Content3
</div>
</div>
</div>
</div>
</div>
2

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]