using checkbox hack to close a dialog

Question

I learned checkbox hack on stackoverflow the other day and I successfully applied it to making a dialog to open on click of a text. However, now I want to close the dialog when "X" is clicked. Below is what I have attempted up to now, but to no avail:

https://jsfiddle.net/gmcy12zv/5/

HTML

<div style="height:100px">

</div>

<div class="tooltip">
        <input type="checkbox" id="clickhere" />
        <label for="clickhere">
           <div class="click-msg">click here</div>
        </label>
        <div class="tooltiptext">
            <input type="checkbox" id="closeCheck"/>
            <label for="closeCheck">
              <div class="close">
                X
              </div>
            </label>
            <h1 class="tooltip-title">should open on click</h1>
            <p class="tooltip-msg"> close when X is clicked</p>
        </div>
</div>

I want "tooltiptext" to disappear when X button for div "close" is clicked.

CSS

#clickhere {
  display: none;
}

#clickhere:not(:checked) ~ .tooltiptext {
  display:none;
} 

#clickhere:checked ~ .tooltiptext {
  visibility: visible;
}

#closeCheck {
  display: none;
}

/* #closeCheck:not(:checked) ~.tooltiptext {
  visibility: visible;
} */

#closeCheck:checked ~.tooltiptext {
  display:none;
}

.click-msg{
 font-weight: 400;
font-size: 10px;
line-height: 20px;
}

.tooltip-title {
font-weight: 700;
font-size: 10px;
line-height: 20px;
}
.tooltip-msg{
  font-weight: 400;
font-size: 10px;
line-height: 20px;
}

.tooltip .close{
  position: absolute;
  top: 5px;
  right: 5px;
}

.tooltip {
  text-align: right;
  position: relative;
  display: block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  position: absolute;
  z-index: 1;
}

/* .tooltip:hover .tooltiptext {
  visibility: visible;
} */

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  border-style: solid;
  border-width: 5px;
}

.tooltip .tooltiptext {
  width: 120px;
  bottom: 150%;
  left: 80%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  top: 100%;
  left: 90%;
  margin-left: -5px;
  border-color: black transparent transparent transparent;
}

where am I going wrong in my approach ? is this because two checkboxes are almost nexted?

Does this answer your question? [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Boaz, Jun 19 '22 at 07:49
The question appears to boil down to selecting the dialog and applying CSS to it, according to the state of its child checkbox. Since CSS does not (yet) have a parent selector, this is not possible. See more details in the suggested duplicate. — Boaz, Jun 19 '22 at 07:51

Basit Mir · Accepted Answer · 2022-06-19T07:40:39.303

You are working with checkboxes. The checkbox hack in this case is not the best way. The "click here" text is actually a checkbox where you are providing a property checked in CSS ,this can be achived by adding another checkbox at the close button to work exactly as the one you used to open but I will not suggest that. I suggest the best practice is to use JavaScript click events. I have changed your code .I added some javascript and edited some HTML ansd CSS . Youn can check it out ,it works perfectly the way you wanted.

var dialog= document.querySelector(".tooltiptext");
var openBtn =  document.querySelector(".price-line");
var closeBtn = document.querySelector(".close");

openBtn.addEventListener("click",()=>{
dialog.style.display ="block";
});
closeBtn.addEventListener("click",()=>{
dialog.style.display ="none";
})

.price-line{
 font-weight: 400;
font-size: 10px;
line-height: 20px;
}
/* 
.price-line:active .tooltiptext {
  visibility: visible;
}

.tooltiptext:hover {
  visibility: visible;
}
 */
.tooltip-title {
font-weight: 700;
font-size: 10px;
line-height: 20px;
}
.tooltip-msg{
  font-weight: 400;
font-size: 10px;
line-height: 20px;
}

.tooltip .close{
  position: absolute;
  top: 5px;
  right: 5px;
}

.tooltip {
  text-align: right;
  position: relative;
  display: block;
}

.tooltip .tooltiptext {
  display:none;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  position: absolute;
  z-index: 1;
}

/* .tooltip:hover .tooltiptext {
  visibility: visible;
} */

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  border-style: solid;
  border-width: 5px;
}

.tooltip .tooltiptext {
  width: 120px;
  bottom: 150%;
  left: 80%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  top: 100%;
  left: 90%;
  margin-left: -5px;
  border-color: black transparent transparent transparent;
}

<div style="height:100px">

</div>

<div class="tooltip">
        
        <label for="clickhere">
           <div class="price-line">click here</div>
        </label>
        <div class="tooltiptext">
            
            <label for="closeCheck">
              <div class="close">
                X
              </div>
            </label>
            <h1 class="tooltip-title">should open on click</h1>
            <p class="tooltip-msg"> close when X is clicked</p>
        </div>
</div>

hi, thanks for sharing a simpler alternative approach. however, i am interested in pursuing the checkbox approach, too and in my original code, i applied the checkbox hack to the X button yet it still didn't close when clicked. do you happen to know why? — lifewithoutjava0909, Jun 19 '22 at 07:53
Yes It's because you have to access the properties of parent element (making the display to none) when clicking on "X" button which is not possible using CSS. However, it is possible if you can make the element adjacent to the dialog to make that happen. That's is why I told you that its not the best practice in this case. — Basit Mir, Jun 19 '22 at 08:31

zer00ne · Answer 2 · 2022-06-19T09:20:27.530

Using only CSS.

Place the #closeCheck on top of .tooltip or .tooltiptext:

<input type="checkbox" id="closeCheck" />
<div class="tooltip"><!...->

Next hide #closeCheck and when it's checked hide .tooltiptext

#closeCheck {display:none;}
#closeCheck:checked + .tooltip .tooltiptext {display: none;}

That "+" is an adjacent sibling combinator which singles out the tag positioned immediately next.

Example A is the fixed OP code
Example B is a different layout with a better strategy.

Example A

#closeCheck {
  display: none;
}

#closeCheck:checked+.tooltip .tooltiptext {
  display: none;
}

<input type="checkbox" id="closeCheck" />

<div class="tooltip">
  <input type="checkbox" id="clickhere" />
  <label for="clickhere">
           <div class="click-msg">click here</div>
        </label>
  <div class="tooltiptext">

    <label for="closeCheck">
              <div class="close">
                X
              </div>
            </label>
    <h1 class="tooltip-title">should open on click</h1>
    <p class="tooltip-msg"> close when X is clicked</p>
  </div>
</div>

Example B

.dialog {
  margin-bottom: 8px;
}

legend,
menu {
  display: inline-block;
  float: right;
}

label {
  padding: 3px 5px;
  border: 2px inset lightgrey;
  border-radius: 4px;
  cursor: pointer;
}

#switchA,
#switchB,
.dialog {
  display: none
}

#switchA:checked+.open {
  display: none
}

#switchA:checked~.dialog.A {
  display: block;
}

#switchB:checked+.dialog.B {
  display: block;
}

<input id='switchA' type='checkbox'>

<label for='switchA' class='open A'>Open</label>
<fieldset class='dialog A'>
  <legend><label for='switchA'>X</label></legend>
  <p>Beth, your son is dying! Say good-bye! Yo! What up my glip glops! Crystal poachers. There's no lower form of life. They think the galaxy's their own personal piggy bank. You can run, but you can't hide bitch! </p>
  <menu>
    <label for='switchA'>Cancel</label>
    <label for='switchB'>Next</label>
  </menu>
</fieldset>

<input id='switchB' type='checkbox'>

<fieldset class='dialog B'>
  <legend><label for='switchB'>X</label></legend>
  <p>Where are my testicles, Summer? I'm man enough to simply say, 'I'm going to poop', and I'd be honored to have Ron Howard involved. Dont look at me! That guy over there roped me into this. Dont mind those stare goblins.</p>
  <menu>
    <label for='switchB'>Cancel</label>
  </menu>
</fieldset>

i only want the dialog with message (should open on click ...) to disappear not the whole thing — lifewithoutjava0909, Jun 19 '22 at 08:15
See update **Example A**. Your layout isn't optimal see **Example B** — zer00ne, Jun 19 '22 at 08:39

using checkbox hack to close a dialog

2 Answers2

Example A

Example B