How to hide div when input is checked?

Question

I have a problem so I started making a website with my friend just for fun to kill boredom and we've got a problem. I made a responsive navbar using input but I do not know how to do thing like when my input is checked then div "middle" will dissapear. Is there a posibility that I could hook up somehow this input to div middle? thanks a lot:)

.nav-toggle:checked ~ nav{
  transform: scale(1, 1);
  /*display: block;*/
}

.nav-toggle:checked ~ nav a{
  opacity: 1;
  transition: opacity 250ms ease-in-out 250ms;
}

@media screen and (min-width: 1024px) {
  .nav-toggle-label {
    display: none;
  }

  <header>
    <h1 class="logo">title</h1>
    <input type="checkbox" id="nav-toggle" class="nav-toggle">
    <nav>
      <ul>
        <li><a href="#">abc</a></li>
        <li><a href="#">acba</a></li>
        <li><a href="#">abc</a></li>
        <li><a href="#">abc</a></li>
        <li><a href="#">abc</a></li>
        <li><a href="#">abc</a></li>
      </ul>
    </nav>
    <label for="nav-toggle" class="nav-toggle-label">
      <span></span>
    </label>
  </header>


  <div class="content">
    <div class="middle">

    <h2>title</h2>
    <img src="img/brandlogo.png" alt="alter" height="410" width="410">
    <p class="button">order</p>
    </div>
  </div>

Not with CSS (see [Show div when input is checked, CSS-only no javascript](https://stackoverflow.com/q/35362653)). If you can use jQuery, there are a plethora of choices, including [How to show/hide an element on checkbox checked/unchecked states using jQuery?](https://stackoverflow.com/q/18307323) — Heretic Monkey, Aug 13 '18 at 18:55

score 0 · Answer 1 · answered Aug 13 '18 at 19:07

All you have to do is toggle the class on click to the checkbox.

$('.nav-toggle').on('click', function(){
      $('.middle').toggle();
});

.nav-toggle:checked ~ nav{
  transform: scale(1, 1);
  /*display: block;*/
}

.nav-toggle:checked ~ nav a{
  opacity: 1;
  transition: opacity 250ms ease-in-out 250ms;
}

@media screen and (min-width: 1024px) {
  .nav-toggle-label {
    display: none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
    <h1 class="logo">title</h1>
    <input type="checkbox" id="nav-toggle" class="nav-toggle">
      <nav >
        <ul>
          <li><a href="#">abc</a></li>
          <li><a href="#">acba</a></li>
          <li><a href="#">abc</a></li>
          <li><a href="#">abc</a></li>
          <li><a href="#">abc</a></li>
          <li><a href="#">abc</a></li>
        </ul>
      </nav>
    <label for="nav-toggle" class="nav-toggle-label">
      <span></span>
    </label>
  </header>


  <div class="content">
    <div class="middle">

    <h2>title</h2>
    <img src="img/brandlogo.png" alt="alter" height="410" width="410">
    <p class="button">order</p>
    </div>
  </div>

score 0 · Answer 2 · answered Aug 13 '18 at 19:13

You can work with jquery for performing the action. I simply identified the event of checkbox click and checked if the check box is checked or unchecked. So, when it is checked I hide the div with class middle. else I display it.

<script type="text/javascript">
$(document).ready(function(){
$("#nav-toggle").click(function(){
if($(this).is(':checked')) {
  $("div.middle").hide();
}
else
{
  $("div.middle").show();
}
});
});
</script>

Don't forget adding the cdn

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Add both the above codes in head part or before closing the body tag.

How to hide div when input is checked?

2 Answers2