Я пытаюсь воспроизвести решение для аккордеона css-only из codepen, найденного здесь
https://codepen.io/anon/pen/xmGYbP
Однако, когда я копирую код в jsfiddle, он не работает, и я замечаюв CSS отсутствует код, на который ссылается HTML.
(1) Кто-нибудь понимает, как получить доступ к полному коду, необходимому для этого решения?
(2) Первый раздел всегда сворачивается при загрузке, есть ли способ сохранить все закрыто с самого начала, пока не нажали?
Вот что я могу получить:
HTML and CSS code below:
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
.panel-title > a:before {
float: right !important;
font-family: FontAwesome;
content:"\f068";
padding-right: 5px;
}
.panel-title > a.collapsed:before {
float: right !important;
content:"\f067";
}
.panel-title > a:hover,
.panel-title > a:active,
.panel-title > a:focus {
text-decoration:none;
}
<div class="container">
<div class="row">
<div class="col-md-3">
<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="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.le VHS.</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">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div>
</div>
</div>
</div>
</div>
</div>
</div>