CODEWITHSUNDEEP
csssass
user3586702
user3586702

Reputation: 15

If checkbox is checked then hide an element

I can't use JavaScript in this case.

I have a pop-up on whole size, and I want to hide it with a type of button. HTML Looks like that

    <div class="overlay2">
    <!--the rest of content -->
    <label for="menu-toggle">Hide</label>
    <input type="checkbox" id="menu-toggle"/>
    </div>

My SCSS/CSS for this is looks:

.overlay2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f0ad4e;
  z-index: 100;

  opacity: 1;
  display: block;
}
    label {
      cursor: pointer;
    }
    #menu-toggle{
      display: none; /* hide the checkbox */
    }

    .overlay2 {
    $is_checked: menu-toggle;
    @if is_checked{
      display: none;
    }
}

This pop-up is .overlay2

I think I have a problem with this last part of style. I don't have an idea how to check if the checkbox is checked.

Upvotes: 0

Views: 4496

Answers (1)

Wentao Liu
Wentao Liu

Reputation: 71

Here is an example:

<input type="checkbox" id="toggle">
<label for="toggle">&equiv;</label>
<ul>
    <li>
        <a href="#">Some Links</a>
    </li>
</ul>

and the css:

#toggle:checked ~ ul li {
    display:block; /* or display:none; */
}
#toggle{
    display:none;
}

you may replace the ul li with .overlay2 or something.

EDIT:

Do you want something like this? click the label,hide the label and the rest of content at the same time.

<div class="overlay2">
    <input type="checkbox" id="menu-toggle"/>
    <label for="menu-toggle">Hide</label>
    <div class="others">
        the rest of content
    </div>
</div>

CSS:

#menu-toggle{
  display:none;
}
#menu-toggle:checked ~ .others{
  display:none;
}
#menu-toggle:checked ~ label[for=menu-toggle]{
  display:none;
}

Upvotes: 2

Related Questions