Hide div when checkbox checked without JavaScript

Question

Everything except the actual function of hiding the div is working. The reason I need this without JavaScript is because it is a no JavaScript warning, that is able to be hidden. I am using CSS to try and set the div's display to none but I don't seem to be doing it right.

HTML

<noscript>
    <div class="jswarning">
        JavaScript is disabled. For the best experience, enable it.
        <label class="jswarningbutton" for="hidejswarning">Hide</label>
        <input id="hidejswarning" type="checkbox">
    </div>
</noscript>

CSS

.jswarning {
    box-sizing: border-box;
    padding: 5px;
    background:red;
    width:100%;
    color:white;
    text-align:center;
}

.jswarningbutton {
    background: white;
    color: red;
    cursor: pointer;
}

.jswarningbutton + input {
    display: none;
}

.jswarningbutton + input[type=checkbox]:checked ~ .jswarning {
    display: none;
}

Man, just use JS for this, really. Display the no JS message in one of the any other ways, this is hack and no good, look at the reply, the "hide" text remains there no matter whether the box is checked or not, this is just ugly, sorry — ptts
– ptts, Commented Aug 19, 2017 at 5:11
You can use :has(); which is part of the Web Baseline since December 2023: stackoverflow.com/a/78163570/633961 — guettli
– guettli, Commented Mar 15, 2024 at 8:27

Dij · Accepted Answer · 2017-08-19 05:01:45Z

3

The ~ CSS selector is called the General Sibling Selector. It selects siblings of the preceding selector.

.jswarning {
box-sizing: border-box;
padding: 5px;
background:red;
width:100%;
color:white;
text-align:center;
}

.jswarningbutton {
background: white;
color: red;
cursor: pointer;
}

.jswarningbutton + input {
display: none;
}

.jswarningbutton + input[type=checkbox]:checked ~ .jswarning{
display: none;
}

<label class="jswarningbutton" for="hidejswarning">Hide</label>
<input id="hidejswarning" type="checkbox">
<div class="jswarning">
    JavaScript is disabled. For the best experience, enable it.
</div>

answered Aug 19, 2017 at 5:01

Dij

9,8184 gold badges21 silver badges35 bronze badges

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

2 Comments

XantiuM Over a year ago

Would it be possible to have the label+checkbox "button" inside the div that needs to be hidden?

Dij Over a year ago

there is no parent selector in css. you can put in inside the div but then there is no way to select the div and hide it.

Steve Piercy · Accepted Answer · 2017-08-19 10:15:58Z

1

You are using the ~ CSS selector incorrectly.

The ~ selector should be used as p ~ ul. This means apply this CSS for every ul that is preceded by p tag. You can find the selector reference in here.

edited Aug 19, 2017 at 10:15

Steve Piercy

15.3k2 gold badges54 silver badges67 bronze badges

answered Aug 19, 2017 at 4:58

Anas AL-zghoul

4676 silver badges15 bronze badges

Comments

XantiuM · Accepted Answer · 2017-08-19 05:38:17Z

Since this is reportedly impossible with CSS (as of August 2017), I've managed to do it with PHP cookies. If anyone is interested, this is the code I've used (there's probably a better way):

Main page (index.php)

<?php
    if(!isset($_COOKIE['hidejswarning'])){
        setcookie('hidejswarning', '0', time()+3600, '/');
        header('Location: index.php');
    }
?>

<!DOCTYPE html>
<html>
    <body>
        <?php
            if ($_COOKIE["hidejswarning"] != '1') {
                echo "
        <noscript>
            <div class='jswarning'>
                JavaScript is disabled. For the best experience, enable it. <a href='hidejswarning.php'>Hide</a>
            </div>
        </noscript>
                ";
            }
        ?>
    </body>
</html>

Page which sets the cookie (hidejswarning.php)

<?php
    setcookie('hidejswarning', '1', time()+3600, '/');
    header('Location: index.php');
?>
<html><body>Please wait...</body></html>

Roger Krueger · Accepted Answer · 2017-08-19 17:06:38Z

1) The thing you're hiding needs to be a sibling of the input, not a parent. There is no parent selector. Easy fix.

2) It needs to be after the input tag in the html. There is no preceding sibling selector. Difficult fix for your given appearance. You need some messy positioning to get a message that's after the checkbox in the html to appear before it.

3) But this interaction doesn't need to visually be a checkbox. Hide the checkbox input tag (with a display:none), clicking on the label still toggles checkbox state. Put the message in a div/span inside the label, after the input tag. Now you can use the ~ selector to hide the message. Maybe style the word "hide" so it looks buttonish.

Collectives™ on Stack Overflow

Hide div when checkbox checked without JavaScript

4 Answers 4

2 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Linked

Related