Hide table row based on checkbox in pure CSS

Question

A bit of backstory, for those who care: some time ago I stumbled across this: https://medium.com/front-end-hacking/how-it-feels-to-learn-javascript-in-2017-a934b801fbe, and in particular, this: https://brlewis.github.io/2017/planets.html

And today I thought: CSS is perfectly capable of hiding things based on the state of checkboxes, which would achieve pretty much the same effect. The only trouble is, I have no idea whether CSS selectors are flexible enough to select the right table rows.

So, my question is this: given some HTML resembling this:

<label><input type=checkbox id=rock> Terrestrial</label>
<label><input type=checkbox id=gas> Gas Giant</label>
<label><input type=checkbox id=ice> Ice Giant</label>
<table>
<tr class=rock><td>whatever
<tr class=ice><td>whatever
... and so one...
</table>

Can we do something like this?

magic ~ > :checked ~ tr {display: none}

Naren Murali · Accepted Answer · 2017-09-10 20:34:30Z

4

Final Answer:

Here is my mockup of what you are trying to do. By the way Nice Question!!!

input#rock:checked ~ table tr.rock {display: block}

input#gas:checked ~ table tr.gas {display: block}

input#ice:checked ~ table tr.ice {display: block}

input:checked ~ table tr {display:none}

<input type=checkbox id=rock><label> Terrestrial</label>
<input type=checkbox id=gas><label> Gas Giant</label>
<input type=checkbox id=ice><label> Ice Giant</label>
<table>
<tr class=rock><td>whatever for rock</td></tr>
<tr class=ice><td>whatever for ice</td></tr>
<tr class=gas><td>whatever for gas</td></tr>
</table>

Old Answer:

If you seperate the label and the checkbox it can be achieved like so!

input:checked ~ table tr {display: none}

<input type=checkbox id=rock checked><label> Terrestrial</label>
<input type=checkbox id=gas><label> Gas Giant</label>
<input type=checkbox id=ice><label> Ice Giant</label>
<table>
<tr class=rock><td>whatever</td></tr>
<tr class=ice><td>whatever</td></tr>
</table>

edited Sep 10, 2017 at 20:34

answered Sep 10, 2017 at 19:05

Naren Murali

66.2k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Mark VY Over a year ago

Wow, really nice! (Though in retrospect I guess I wanted :not:checked.) So I suppose there's no way to do this for an arbitrarily placed checkbox, by somehow saying "this checkbox id goes with this css class"?

Naren Murali Over a year ago

@MarkVY Can you give me the exact scenario I will try to replicate, You had given some CSS and HTML which helped me understand the scenario quickly can you give me something like that?

Naren Murali Over a year ago

@MarkVY Updated my answer, is this what you need?

Mark VY Over a year ago

Sorry, didn't mean to distract you by cosmetic issues. I meant that if "ice" is checked, then "ice" should be visible. Thank you for an amazingly quick response. And thanks for the compliment :)

Naren Murali Over a year ago

@MarkVY That is what I have done in my updated answer, the first code snippet can you check this?

|

Collectives™ on Stack Overflow

Hide table row based on checkbox in pure CSS

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related