Я использую Новейшую версию Bootstrap (4.3.1) и строю гармошку (элемент Collapse). Буквальное копирование и вставка кода из документации и всего аккордеонного контента открыты при загрузке страницы. Они должны быть закрыты (возможно, будет открыт только первый).
Даже изменение aria-extended или любого другого параметра не решает проблему. Пытался принудительно закрыть его с помощью js code $ ('. Collapse'). Collapse (), но все еще не видит, что я делаю неправильно. Изменение карты содержимого для отображения без использования CSS также не решает проблему.
Ссылка на codepen: https://codepen.io/A8-XPs/pen/yWbYeN?editors=1100
HTML
<div class="list-wrapper">
<ul class="list list-default has-line-effect">
<li id="accordion">
<div class="text left" id="headingOne">
<h3>List item name</h3>
<span class="arrow-wrapper">
</span>
<a class="btn-link collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>
</div>
<div class="right">
<div class="" id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion" >
<div class="card-body p-0">
<ul>
<li>
<a href="">Horaires des navires</a>
</li>
<li>
<a href="">Temps d’attentes des camions</a>
</li>
<li>
<a href="">Opérations</a>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</section>
CSS / SCSS:
ul.list-default > li {
border-bottom: 1px solid blue;
padding-top: 25px;
padding-bottom: 25px;
}
.bloc__list-basic-small .list-wrapper {
max-width: 350px;
}
.bloc__list-basic-small .list-wrapper ul.list {
border-top: 1px solid blue;
}
.bloc__list-basic-small .list-wrapper ul.list li .left {
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 35px;
}
.bloc__list-basic-small .list-wrapper ul.list li .left .arrow-wrapper {
opacity: 0;
visibility: hidden;
transform: translateX(-20px);
}
.bloc__list-basic-small .list-wrapper ul.list li:hover .arrow-wrapper {
opacity: 1 !important;
visibility: visible !important;
transform: translateX(0) !important;
}
.bloc__list-basic-small.has-accordion .bloc__section-title {
margin-bottom: 0;
}
.bloc__list-basic-small.has-accordion .bloc__section-title .container {
padding-left: 0;
padding-right: 0;
}
.bloc__list-basic-small.has-accordion .bloc__section-title .desc,
.bloc__list-basic-small.has-accordion .bloc__section-title .right {
display: none;
}
.bloc__list-basic-small.has-accordion .bloc__section-title .wrapper {
border-bottom: none;
}
.bloc__list-basic-small.has-accordion .list-wrapper {
max-width: 540px;
}
.bloc__list-basic-small.has-accordion .list-wrapper ul.list {
border-top: 1px solid blue;
}
.bloc__list-basic-small.has-accordion .list-wrapper ul.list > li {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.bloc__list-basic-small.has-accordion .list-wrapper ul.list > li .left,
.bloc__list-basic-small.has-accordion .list-wrapper ul.list > li .right {
width: calc((100% - 30px) / 2);
}
.bloc__list-basic-small.has-accordion .list-wrapper ul.list > li .left {
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 35px;
position: relative;
}
.bloc__list-basic-small.has-accordion .list-wrapper ul.list > li .left .btn-link:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: .2;
z-index: 3;
}
.bloc__list-basic-small.has-accordion .list-wrapper ul.list > li .right ul li {
margin-bottom: 2px;
}
.bloc__list-basic-small.has-accordion .list-wrapper ul.list > li .right ul a {
letter-spacing: 0.7px;
text-decoration: underline;
}
.bloc__list-basic-small.has-accordion .list-wrapper ul.list > li:hover .arrow-wrapper {
opacity: 1 !important;
visibility: visible !important;
transform: translateX(0) !important;
}
Я ожидаю, что контентная часть аккордеона будет закрыта по умолчанию.