Question

I have this code that should show and hide element outputs according to specific checkboxes.

The output that I´ve got is that each checkbox, when clicked, shows more outputs than it should.

How can they be targeted using specific css IDs?

I mean, whan you click on each box, it should only appear the text that´s referencin that specific box, and not all of them.

Thanks for your insight!!

Rosamunda

Answer 1

DEMO

/*styled relative to the label*/
label {display:block;}
label ~ div {display:none; margin-left:1em;}

/*targetting*/
/*boxes with id having this number will style a sibling div with this number*/
input[type="checkbox"][id*="131"]:checked ~ div[class*="131"] {display:inline;}
input[type="checkbox"][id*="134"]:checked ~ div[class*="134"] {display:inline;}
input[type="checkbox"][id*="130"]:checked ~ div[class*="130"] {display:inline;}