jeudi 29 septembre 2022

Hide/limit checkboxes based on their amount

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 class="t-product__option-variants t-product__option-variants_custom t-product__option-variants_buttons t-product__option-variants_color">

    <label class="t-product__option-item t-product__option-item_active t-product__option-item_buttons t-product__option-item_color">
    <input class="t-product__option-input t-product__option-input_buttons t-product__option-input_color" type="radio" name="Color" value="Color 1" checked=""></label>

    <label class="t-product__option-item t-product__option-item_buttons t-product__option-item_color">
    <input class="t-product__option-input t-product__option-input_buttons t-product__option-input_color" type="radio" name="Color" value="Color 2"></label>

    <label class="t-product__option-item t-product__option-item_buttons t-product__option-item_color">
    <input class="t-product__option-input t-product__option-input_buttons t-product__option-input_color" type="radio" name="Color" value="Color 3"></label>

    <label class="t-product__option-item t-product__option-item_buttons t-product__option-item_color">
    <input class="t-product__option-input t-product__option-input_buttons t-product__option-input_color" type="radio" name="Color" value="Color 4"></label>

    <label class="t-product__option-item t-product__option-item_buttons t-product__option-item_color">
    <input class="t-product__option-input t-product__option-input_buttons t-product__option-input_color" type="radio" name="Color" value="Color 5"></label>

    <label class="t-product__option-item t-product__option-item_buttons t-product__option-item_color">
    <input class="t-product__option-input t-product__option-input_buttons t-product__option-input_color" type="radio" name="Color" value="Color 6"></label>

    <label class="t-product__option-item t-product__option-item_buttons t-product__option-item_color">
    <input class="t-product__option-input t-product__option-input_buttons t-product__option-input_color" type="radio" name="Color" value="Color 7"></label>

    <label class="t-product__option-item t-product__option-item_buttons t-product__option-item_color">
    <input class="t-product__option-input t-product__option-input_buttons t-product__option-input_color" type="radio" name="Color" value="Color 8"></label>

</form>



Aucun commentaire:

Enregistrer un commentaire