using checkbox hack to close a dialog - html

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?

Answer 1

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>

Answer 2

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>