Я пытался сделать кастомный список, но возникает следующая проблема, первый чекбокс расширается со вторым, хотя не должен
<div class="custom_details">
<input type="checkbox" id="faq-1">
<p><label for="faq-1">programm language</label></p>
<div class="list">
<ul>
<li>java</li>
<li>javascript</li>
<li>c#</li>
</ul>
</div>
</div>
<div class="custom_details">
<input type="checkbox" id="faq-2">
<p><label for="faq-2">I can do</label></p>
<div class="list">
<ul>
<li>mobile apps</li>
<li>frontend sites</li>
<li>games(3d models)</li>
</ul>
</div>
</div>
.custom_details{
padding: 0px 10px;
position: relative;
p {
border-radius: 15px;
padding: 15px ;
background: rgba($color: rgb(255, 196, 224), $alpha: 0.2);
transition: all 0.5s;
backdrop-filter: blur(15px);
margin: 0px;
position: relative;
}
div.list {
position: relative;
max-height: 0px;
overflow: hidden;
transition: max-height 0.5s;
border-radius: 0px 0px 15px 15px;
background: rgba($color: rgb(241, 164, 200), $alpha: 0.2);
backdrop-filter: blur(15px);
}
ul{
position: S;
list-style: none;
padding: 25px;
margin: 0px;
}
input{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
// opacity:0;
// visibility: 0;
z-index: 1;
&:checked {
~ p{
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
border-radius: 15px 15px 0px 0px;
}
~ p label::before {
border-left: 15px solid transparent;
border-top: 20px solid white;
margin-top: 12px;
margin-right: 10px;
}
~ p ~ div.list{
max-height:200px;
}
}
}
}
Простой
