Question posted in 
All I’m trying to do is toggle the ‘toggle-content’ class when the label is selected. At the moment with the following CSS nothing happens. I cannot use JQuery or any javascript. I cannot see what I’ve done wrong. Any ideas greatly appreciated.
/* The checkbox */
.hidden-checkbox {
display: block;
}
/* The element to show/hide */
.toggle-content {
display: none;
z-index: 2;
position: absolute;
background-color: dimgrey;
color: white;
border: black;
border-width: 1px;
border-style: solid;
border-radius: 5px;
padding: 3px;
}
/* The label that controls the element */
.label-toggle {
cursor: pointer;
}
/* Show the element when the checkbox is checked */
.hidden-checkbox:checked + .toggle-content {
display: block;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow-y: auto;
max-height: 100px;
padding-right: 10px
}
li {
padding-top: calc(var(--bs-gutter-y)* -1);
padding-right: calc(var(--bs-gutter-x)* -.5);
padding-left: calc(var(--bs-gutter-x)* -.5);
font-size: small;
}
li:hover {
background-color: darkgrey;
}<div>
<label for="toggleVendors" class="label-toggle form-control">
click here
</label>
<div type="checkbox" id="toggleVendors" class="hidden-checkbox" />
<div class="toggle-content">
<ul>
<li><input type="checkbox" id="1" />one</li>
<li><input type="checkbox" id="2" />two</li>
<li><input type="checkbox" id="3" />three</li>
</ul>
</div>
</div>
2
Answers
Divs aren’t inputs they can’t have
type: checkbox.Swap it out for a proper
inputYou have to use an actual checkbox and not a div. To combine a checkbox with a label, use the appropriate id on the checkbox so you can click on the text to toggle the checkbox