Limit display to only show first five labels/checkboxes-CodePudding

Need some help with hiding checkboxes. I have a form that has around 12 labels (checkboxes). I need to only show around 5 in my div, how would I go about hiding the rest? It doesn't matter if they're checked or not or what value they have, just need to show any 5 in the form while hiding the others.

Having a "See more" instead of them might also be useful.

EDIT: Apologies, added code for clarity. I can't change much in the code itself, but I can manipulate it by adding CSS/javascript to the block builder platform I'm using.

    <form >

    <label >
    <input  type="radio" name="Color" value="Color 1" checked=""></label>

    <label >
    <input  type="radio" name="Color" value="Color 2"></label>

    <label >
    <input  type="radio" name="Color" value="Color 3"></label>

    <label >
    <input  type="radio" name="Color" value="Color 4"></label>

    <label >
    <input  type="radio" name="Color" value="Color 5"></label>

    <label >
    <input  type="radio" name="Color" value="Color 6"></label>

    <label >
    <input  type="radio" name="Color" value="Color 7"></label>

    <label >
    <input  type="radio" name="Color" value="Color 8"></label>

</form>

CodePudding user response：

Have you tried CSS nth-child selectors yet?

/* Hide sibling label elements starting from the sixth */
label:nth-child(n 6) { display: none; }

CodePudding user response：

Here I used nth-of-type to display:none every label after the 5 first.

I added a "See more" checkbox. It has to be before the other checkbox since you can't select a previous element in CSS, so I change its order.

form {
  display: flex;
  flex-wrap: wrap;
}

.break-line,
[for="see-more"],
#see-more {
  order: 9999;
}

.break-line {
  width: 100%;
}

label:nth-of-type(n 7) {
  display: none;
}

#see-more:checked~label:nth-of-type(n 7) {
  display: block;
}

<form>
  <div ></div>
  <label for="see-more">See more</label>
  <input type="checkbox" name="see-more" id="see-more">
  <label><input type="radio" name="Color" value="Color 1" checked=""></label>
  <label><input type="radio" name="Color" value="Color 2"></label>
  <label><input type="radio" name="Color" value="Color 3"></label>
  <label><input type="radio" name="Color" value="Color 4"></label>
  <label><input type="radio" name="Color" value="Color 5"></label>
  <label><input type="radio" name="Color" value="Color 6"></label>
  <label><input type="radio" name="Color" value="Color 7"></label>
  <label><input type="radio" name="Color" value="Color 8"></label>
</form>