Html - Multiple dropdown with checkbox css

bilpor
June 5, 2024
177 views
0 votes
2 Answers

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>

Tags: css html

Answers

Divs aren’t inputs they can’t have type: checkbox.

Swap it out for a proper input

/* The checkbox */

.hidden-checkbox {
  display: none;
}


/* 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>
  <input 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>

You 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

/* The checkbox */

.hidden-checkbox {
  display: none;
}


/* 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>
  <input 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>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Multiple dropdown with checkbox css

Answers