Hide text at onClick using css

Question

My Code:

HTML:

<input id="show" type=checkbox>
<div id="content">
<p>i need help</p>
<label for="show" style="color: red;">Hide</label>
</div>
<label for="show" >read more</label>

CSS:

#show,#content{display:none;}
#show:checked~#content{display:block;}

This code will show/hide the Content when clicked on "read more" But I also want to hide the "read more" when its clicked using only css without javascript.

How can I hide it? Thanks in advance!!

#show,#content{display:none;}
    #show:checked~#content{display:block;}

<input id="show" type=checkbox>
<div id="content">
<p>Any help would be appreciated</p>
<label for="show" style="color: red;">Hide</label>
</div>
<label for="show" >read more</label>

It works exactly the same way for the label, as it did for #content - only that you want to set display:none. — C3roe
– C3roe, Commented Sep 9, 2021 at 14:12

timmmmmb · Accepted Answer · 2021-09-09 14:12:33Z

1

Just do it like this:

#show,#content{display:none;}
#show:checked~#content{display:block;}
#show:checked~#more{display:none;}

<input id="show" type=checkbox>
<div id="content">
<p>Any help would be appreciated</p>
<label for="show" style="color: red;">Hide</label>
</div>
<label for="show" id="more">read more</label>

answered Sep 9, 2021 at 14:12

timmmmmb

80612 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

Hide text at onClick using css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related