I am using Bootstrap and encountering an issue with displaying checkboxes after clicking on an accordion element.
While the first checkbox is displayed correctly, the checkboxes inside the accordion do not appear as expected. It is confusing to me why this is happening.
To summarize, my problems are as follows: - When I click on the label of the child category, the checkbox of the parent category gets checked. - The checkbox of the child category does not seem to appear.
HTML
<div class="container">
<div class="accordion-item position-relative row">
<div class="col-6 container-checkboxes">
<label class="form-check-label" for="checkbox">
<input class="form-check-input" type="checkbox" value="" id="checkbox">
<span class="checkmark"></span>
Category 1
</label>
</div>
<div class="col-6">
<div class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse" aria-expanded="true" aria-controls="collapse"></div>
</div>
<div id="collapse" class="accordion-collapse collapse" aria-labelledby="heading" data-bs-parent="#accordionFilter">
<div class="accordion-body">
<div class="container-checkboxes">
<label class="form-check-label" for="checkbox-sub1">
<input class="form-check-input" type="checkbox" value="" id="checkbox-sub1">
<span class="checkmark"></span>
Subcategory 1
</label>
</div>
</div>
</div>
</div>
</div>
SCSS
.accordion {
.accordion-item {
background: none;
border: none;
}
.accordion-button {
background: none;
padding: 0.4rem 0 0 0;
&::after {
height: 1rem;
width: 1rem;
}
&:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");
}
&:not(.collapsed) {
box-shadow: none;
}
}
}
.container-checkboxes {
.form-check-label {
padding-left: 2rem;
input {
cursor: pointer;
height: 0;
opacity: 0;
position: absolute;
width: 0;
}
.checkmark {
border: 1px solid #9b9b9b;
height: 21px;
left: 0;
position: absolute;
top: 0;
width: 21px;
&:after {
border: solid white;
border-width: 0 3px 3px 0;
content: "";
display: none;
height: 0.8rem;
left: 6px;
position: absolute;
top: 3px;
transform: rotate(45deg);
width: 0.4rem;
}
}
&:hover input + .checkmark {
background-color: #ccc;
}
input:checked + .checkmark {
background-color: green;
border: none;
}
input:checked + .checkmark:after {
display: block;
}
}
}
scss
You can find my code here: https://codepen.io/zazzou/pen/bGaBoXa
Thank you for your assistance.