Question 217833 in Html Question posted in
Some basic documentation can be found here.

I want to show container when the checkbox is checked "HTML/CSS"

So I want to make a container hidden but when the checkbox is checked I want it to be visible, only HTML/CSS, Is it possible?

.imgs-container {
  display: grid;
  justify-content: stretch;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
#app:checked ~ .imgs-container {
  display: none;
}
 <body>
    <label for="#app">App</label>
    <input type="checkbox" name="app" id="#app" />
    <div class="imgs-container">
      <div class="img-box">
        <img src="/img/d1.jp" alt="image" />
        <div class="text">
          <h4>Awesome image</h4>
          <p>Photography</p>
        </div>
      </div>
    </div>
  </body>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    My code is right, the problem was the Hash in the <input id="#app">


  2. 0

    Remove # from for and from id.

    Also invert your selector with :not(:checked)

    .imgs-container {
  display: grid;
  justify-content: stretch;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
#app:not(:checked) ~ .imgs-container {
  display: none;
}
    <body>
    <label for="app">App</label>
    <input type="checkbox" name="app" id="app" />
    <div class="imgs-container">
      <div class="img-box">
        <img src="/img/d1.jp" alt="image" />
        <div class="text">
          <h4>Awesome image</h4>
          <p>Photography</p>
        </div>
      </div>
    </div>
  </body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search