CSS change a class display by checking some checkbox

Question

I'm trying changing a CSS class property by checking a checkbox, but it doesn't work... Can you help me?

My code:

<body>
<style>
    #test:checked~#title {
        display: none;
    }

    .reverse-flexbox {
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start;
    }
</style>
<div>
    <div class="reverse-flexbox">
        <h1 id="title">Just a text</h1>
        sky is blue
    </div>
    <div class="reverse-flexbox">
        <h1 id="title">Just a text</h1>
        i like stackoverflow
    </div>
    <input type="checkbox" id="test" />
    <h1 id="title">Just a text</h1>
    <div>Something else</div>
</div>
</body>

</html>

Nick Vu · Accepted Answer · 2022-06-21 02:48:41Z

1

~ only works for the downward siblings which are below the element #test. #title is above #test, so that's why your styles do not apply.

If you don't want to change element positions, and still want to use ~, you can move #title up for style application, and then use the reverse directions of the flexbox to show #title is above #test (only in display).

For multiple h1 case, you also need to add them below #test checkbox

<html lang="pt-br">

<body>
  <style>
    #test:checked~div > #title {
      display: none;
    }
    
    .reverse-flexbox {
      display: flex;
      flex-direction: column-reverse;
      align-items: flex-start;
    }
  </style>
  <div>
     <div class="reverse-flexbox">
       <input type="checkbox" id="test" />
       <div>
          <h1 id="title">Just a text 1</h1>
       </div>
       <div>
          <h1 id="title">Just a text 2</h1>
       </div>
       <div>
          <h1 id="title">Just a text 3</h1>
       </div>
     </div>
     <div>Something else</div>
  </div>
</body>

</html>

edited Jun 21, 2022 at 2:48

answered Jun 21, 2022 at 1:38

Nick Vu

15.6k5 gold badges29 silver badges37 bronze badges

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

8 Comments

Antharaz Over a year ago

If i have many sub divs, how can i do? Ex: <div class="reverse-flexbox"> <input type="checkbox" id="test" /> <h1 id="title">Just a text</h1> <div> <h1 id="title">test2</h1> <div> <h1 id="title">test3</h1> </div> </div> </div>

Nick Vu Over a year ago

It doesn't matter, you can group them according to your needs. By the way, I updated my answer for your sub-div case @Antharaz

Antharaz Over a year ago

I think i was not clear in my comment... if i have 2 different divs with a h1 and want to hide all h1, i'll have to make one checkbox for each?

Nick Vu Over a year ago

Could you update that HTML in your question? That would help to understand your situation though. @Antharaz

Antharaz Over a year ago

Done :) Something like the new code... i want hide all h1 with one checkbox

|

NIKHIL CHANDRA ROY · Accepted Answer · 2022-06-21 01:40:49Z

1

You have to use input tag first then you can use another html tag to make checked pseudo class working and you can use flexbox to order the html tags.

.form_group{
  display: flex;
  flex-direction: column;
} 
#test{
  order: 2;
}
#title{
  order: 1;
}
#test:checked~#title {
      display: none;
}

<div class="form_group">   
  <input type="checkbox" id="test" />
<h1 id="title">Just a text</h1> 
</div>

answered Jun 21, 2022 at 1:40

NIKHIL CHANDRA ROY

1,12914 silver badges19 bronze badges

2 Comments

Antharaz Over a year ago

If i have many sub divs, how can i do? Ex: <div class="reverse-flexbox"> <input type="checkbox" id="test" /> <h1 id="title">Just a text</h1> <div> <h1 id="title">test2</h1> <div> <h1 id="title">test3</h1> </div> </div> </div>

NIKHIL CHANDRA ROY Over a year ago

use one wrapper of input and h1 tag which will help to order the html tags

Collectives™ on Stack Overflow

CSS change a class display by checking some checkbox

2 Answers 2

8 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related