HTML:
<div id="accordion" class="accordion" style="margin: 1rem auto;">
<div class="accordion__item">
<div class="accordion__header">Характеристики</div>
<div class="accordion__body collapse" style="">
<div class="accordion__content">
<h4>Типи</h4>
<ul class="dash-list-space-before">
<li>Тип <b>A</b>: із зовнішнім різьбленням</li>
</ul>
<ul class="dash-list">
<li>Тип <b>B</b>: з внутрішнім різьбленням</li>
</ul>
<p class="space-before">Пластик</p>
<p>Дюропласт (фенольний полімер ФП)</p>
<ul class="dash-list-space-before">
<li>термостійкість до 110 °C</li>
</ul>
<ul class="dash-list">
<li>чорний колір, глянсове оздоблення</li>
</ul>
<p class="space-before">Стрижень</p>
<p>Нержавіюча сталь AISI 303</p>
<p>матове оздоблення, дробоструминна обробка</p>
</div>
</div>
</div>
<div class="accordion__item">
<div class="accordion__header">Інформація</div>
<div class="accordion__body">
<div class="accordion__content">
<p class="space-before">Обертаються кулясті ручки можуть використовуватися замість обертових ручок, наприклад з маховиками.</p>
</div>
</div>
</div>
<div class="accordion__item">
<div class="accordion__header">Технічна інформація</div>
<div class="accordion__body">
<div class="accordion__content">
<ul class="dash-list-space-before">
<li><a href="#" target="_blank">Характеристики нержавіючої сталі</a></li>
</ul>
<ul class="dash-list">
<li><a href="#" target="_blank">Характеристики пластику</a></li>
</ul>
</div>
</div>
</div>
</div>
Post automatically merged:
CSS:
/*body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
}
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
.accordion__item {
margin-bottom: 0.5rem;
border-radius: 0.25rem;
box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 15%);
}
.accordion__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
color: #000;
font-weight: 500;
background-color: #f4f4f4;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
cursor: pointer;
transition: background-color 0.2s ease-out;
}
.accordion__header::after {
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
margin-left: auto;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-size: 1.25rem;
content: "";
transition: transform 0.25s ease-out;
}
.accordion__item_show .accordion__header::after,
.accordion__item_slidedown .accordion__header::after {
transform: rotate(-180deg);
}
.accordion__header:hover {
background-color: #f4f4f4;
}
.accordion__item:not(.accordion__item_show) .accordion__header {
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.accordion__content {
padding: 0.75rem 1rem;
background: #fff;
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.accordion__item:not(.accordion__item_show) .accordion__body {
display: none;
}
Post automatically merged:
The result of my code
Last edited: