CheckBox Checked then do something

<div class="classone">
<input type="checkbox" name="checkboxx" id="checkboxx" class="checkboxx">
</div>
<div class="classtwo">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem distinctio delectus eius aspernatur labore id, sapiente quaerat natus. Temporibus, alias nobis. Fuga incidunt ullam, modi aspernatur qui delectus eum provident!</p>
</div>
.classtwo {
  display: none;
}
.checkboxx:checked ~ .classtwo,
.checkboxx:checked > .classtwo,
.checkboxx:checked + .classtwo   {
  display: flex;
}

Is my understanding flawed, this will never work through CSS w/o the use of JS?

The problem is that the .classtwo element is neither a descendent nor a sibling of .checkboxx. Your CSS would work if you moved .classtwo inside .classone:

<div class="classone">
<input type="checkbox" name="checkboxx" id="checkboxx" class="checkboxx">
<div class="classtwo">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem distinctio delectus eius aspernatur labore id, sapiente quaerat natus. Temporibus, alias nobis. Fuga incidunt ullam, modi aspernatur qui delectus eum provident!</p>
</div>
</div>

Otherwise, you might be able to do this without altering the HTML by using :has(), but I’ll have to think about that a bit more, as it’s a bit new to me!

2 Likes

Okay, here’s how you could do it with :has() without changing the HTML:

.classtwo {
  display: none;
}

.classone:has(.checkboxx:checked) + .classtwo {
  display: flex;
}

Note that :has() doesn’t have universal support yet.

2 Likes

Thanks this was the replication of some real-life problem, but what you have stated is not possible i.e. making classtwo child of classone. Firefox has 0 support for has. I think JS is fine just insert the class with JS and handle CSS thereafter.

2 Likes

Well that’s a false statement, but it requires you to set a setting, that almost all users won’t have set unless they’re very tech savvy and wanting their browser to emulate the browsers that have supported it.

Until CSS4 is adopted, however, you will need some sort of external effort, because yes, CSS cascades, it doesnt flow upstream :wink:

2 Likes

To be honest it would be nice if it wouldn’t work in CSS.
At the moment we have HMTL and CSS for the design and JavaScript for the functionality. If we start to do some functionality in CSS and some in JavaScript it will become a nightmare for every programmer to understand what is going on.

1 Like

This might possibly be a solution…

HTML

<input type="checkbox" name="checkboxx" id="checkboxx" class="checkboxx">

<div class="classone">
 <label for="checkboxx"></label>
 <div class="classtwo">
  <p>
   Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem distinctio 
   delectus eius aspernatur labore id, sapiente quaerat natus. Temporibus, 
   alias nobis. Fuga incidunt ullam, modi aspernatur qui delectus eum 
   provident!
  </p>
 </div>
</div>

CSS

#checkboxx {
   position: absolute;
   left: -999em;
   top: -999em;
 }
#checkboxx:checked ~ .classone label[for="checkboxx"] {
    background-position: -1em 0;  
 }
#checkboxx:checked ~ .classone .classtwo {
   display: flex;
 }
label[for="checkboxx"] {
   display: block;
   width: 1em;
   height: 1em;
   background-image: url(https://i.postimg.cc/kg6Kz2Tn/label-bg.png);
   background-size: 2em 1em;
   background-position: 0 0;
   cursor: pointer;
 }
.classtwo {
   display: none;
 }

Have a look at it here…
https://codepen.io/Snady_Leiby/full/BaGNdbq

I got this notion interacting with people on Interner and sometimes also here in this community that use or avoid JS and tries to do as much as possible with CSS w/o using JS as far possible. Else I am comfortable with the fundamentals of JS and its DOM manipulation and enhancement capability.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.