CODEWITHSUNDEEP
htmlcsscheckbox
NaughtySquid
NaughtySquid

Reputation: 2087

Unhide div when checkbox is checked

I am trying to create a responsive navbar, so when you click a hidden checkbox the content unhides.

The problem is, I can't get the "checked" css to actually pick up and do anything.

Example to run here: http://codepen.io/anon/pen/KNvvZy

CSS:

#nav-hidden{background: red; display: none;}
#navigation-mobile{display:none;}

/* DESKTOP */
@media only screen and (max-width: 1200px) {
        #navigation-mobile {display: block;}
        #menu-toggle:checked ~ #nav-hidden {
            opacity: 1;
            height: 100vh;
            visibility: visible;
        }

        .label-toggle {
            cursor: pointer;
            display: block;
            float: right;
        }
}

HTML:

<div id="navigation-mobile">
  <input type="checkbox" id="menu-toggle">
      <label for="menu-toggle" class="label-toggle"></label>
    </input>
    <div id="nav-hidden">
        <ul>
            <li>test</li>
            <li>test</li>
        </ul>
    </div>
</div>

Upvotes: 0

Views: 347

Answers (1)

Stickers
Stickers

Reputation: 78676

In your example, on the original state you have:

#nav-hidden{display:none;}

So, you'll need to reset it on :checked state:

#menu-toggle:checked ~ #nav-hidden {display:block;}

Also want to point out that, you can animate height, opacity, visibility etc., but you can't animate display property.

The <input> element is a self-closing tag, you can do <input> or <input />, but you can't do <input></input>.

#nav-hidden {
  display: none;
}
#menu-toggle:checked ~ #nav-hidden {
  display: block;
}
<div id="navigation-mobile">
  <input type="checkbox" id="menu-toggle">
  <label for="menu-toggle" class="label-toggle"></label>
  <div id="nav-hidden">
    <ul>
      <li>test</li>
      <li>test</li>
    </ul>
  </div>
</div>

Upvotes: 2

Related Questions