Hide a div by clicking the CSS button

Question

Hide a div by clicking the CSS button

Asked 7 years ago

Viewed 190 times

2

You can hide a DIV with that button there?

.button {
  display: block;
  position: absolute;
  width: 240px;
  height: 80px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background: -webkit-linear-gradient(top, #11181f 0%, #161f29 100%);
  background: linear-gradient(to bottom, #11181f 0%, #161f29 100%);
  border-radius: 40px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.button span {
  position: absolute;
  display: block;
}
.button span:first-of-type {
  z-index: 100;
  top: 4px;
  right: 4px;
  width: 160px;
  height: 72px;
  background: -webkit-linear-gradient(top, #2c3e50 0%, #1e2a36 100%);
  background: linear-gradient(to bottom, #2c3e50 0%, #1e2a36 100%);
  box-shadow: 0 6px 4px rgba(255, 255, 255, 0.1) inset, 0 2px 0px rgba(255, 255, 255, 0.2) inset, 0 -6px 0px rgba(0, 0, 0, 0.2) inset, 0 -2px 0px rgba(0, 0, 0, 0.2) inset, 0 2px 2px rgba(0, 0, 0, 0.4), -4px 2px 8px rgba(0, 0, 0, 0.4), 2px 0 1px rgba(242, 201, 197, 0.5) inset;
  border-radius: 36px;
  -webkit-transition: right 400ms cubic-bezier(1, 0, 0, 1), box-shadow 400ms ease;
          transition: right 400ms cubic-bezier(1, 0, 0, 1), box-shadow 400ms ease;
}
.button span:nth-last-of-type(-n+2) {
  z-index: 10;
  top: 4px;
  width: 116px;
  height: 72px;
  -webkit-transition: opacity 800ms ease 100ms;
          transition: opacity 800ms ease 100ms;
}
.button span:nth-last-of-type(-n+2):after {
  position: absolute;
  top: 26px;
  line-height: 1;
  font-family: "Open Sans";
  font-weight: 800;
  font-size: 24px;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 20px #ffffff;
}
.button span:nth-of-type(2) {
  left: 4px;
  background: -webkit-linear-gradient(top, #c0392b 0%, #d65548 100%);
  background: linear-gradient(to bottom, #c0392b 0%, #d65548 100%);
  border-top-left-radius: 36px;
  border-bottom-left-radius: 36px;
  box-shadow: 4px 4px 12px 4px rgba(0, 0, 0, 0.5) inset, 0 -2px 8px rgba(0, 0, 0, 0.4) inset;
}
.button span:nth-of-type(2):after {
  content: "OFF";
  left: 18px;
}
.button span:last-of-type {
  right: 4px;
  background: -webkit-linear-gradient(top, #2ecc71 0%, #7ee2a8 100%);
  background: linear-gradient(to bottom, #2ecc71 0%, #7ee2a8 100%);
  border-top-right-radius: 36px;
  border-bottom-right-radius: 36px;
  box-shadow: -4px 4px 12px 4px rgba(0, 0, 0, 0.5) inset, 0 -2px 8px rgba(0, 0, 0, 0.4) inset;
  opacity: 0.2;
}
.button span:last-of-type:after {
  content: "ON";
  right: 22px;
}
.button input[type="checkbox"] {
  display: none;
}
.button input[type="checkbox"]:checked ~ span:first-of-type {
  right: 76px;
  box-shadow: 0 6px 4px rgba(255, 255, 255, 0.1) inset, 0 2px 0px rgba(255, 255, 255, 0.2) inset, 0 -6px 0px rgba(0, 0, 0, 0.2) inset, 0 -2px 0px rgba(0, 0, 0, 0.2) inset, 0 2px 2px rgba(0, 0, 0, 0.4), 4px 2px 8px rgba(0, 0, 0, 0.4), -2px 0 1px rgba(209, 245, 224, 0.5) inset;
}
.button input[type="checkbox"]:checked ~ span:nth-of-type(2) {
  opacity: 0.2;
}
.button input[type="checkbox"]:checked ~ span:last-of-type {
  opacity: 1;
}

<label class="button">
  <input type="checkbox">
  <span></span>
  <span></span>
  <span></span>
</label>

<div align="center"> conteúdo aqui que oculta ao selecionar OFF </div>

1

I think you’re complicating something simple. Hide or show based on checked is a javascript line: onchange="document.querySelector('div').style.display=this.checked==true?'none':''"

– Isac

2018/10/30 at 00:09

1 answer

Browser other questions tagged css input button

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2018-10-30T00:06:52+00:00

One way to solve this only with HTML and CSS is to remove the element input from within the label, but after that you’ll have to use a id in the checkbox and put a for="" in label. To better understand why this is necessary read this answer: The for attribute of a label element serves something?

After taking the checkbox from within the label, and use the for for check the checkbox when you click on label Just use the select brother + to set the rules and show and hide the div with display:none/block in this answer you can read more about the adjacent selector + What the + sign in CSS means?

Okay, now that you’ve seen how everything works the main rule is this. When you have a input:check + label + div (namely, a checkbox checado, followed by a label, followed by a div you show that div)

Click on the btn to show the div

.button {
  display: block;
  position: absolute;
  width: 240px;
  height: 80px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background: -webkit-linear-gradient(top, #11181f 0%, #161f29 100%);
  background: linear-gradient(to bottom, #11181f 0%, #161f29 100%);
  border-radius: 40px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.button span {
  position: absolute;
  display: block;
}
.button span:first-of-type {
  z-index: 100;
  top: 4px;
  right: 4px;
  width: 160px;
  height: 72px;
  background: -webkit-linear-gradient(top, #2c3e50 0%, #1e2a36 100%);
  background: linear-gradient(to bottom, #2c3e50 0%, #1e2a36 100%);
  box-shadow: 0 6px 4px rgba(255, 255, 255, 0.1) inset, 0 2px 0px rgba(255, 255, 255, 0.2) inset, 0 -6px 0px rgba(0, 0, 0, 0.2) inset, 0 -2px 0px rgba(0, 0, 0, 0.2) inset, 0 2px 2px rgba(0, 0, 0, 0.4), -4px 2px 8px rgba(0, 0, 0, 0.4), 2px 0 1px rgba(242, 201, 197, 0.5) inset;
  border-radius: 36px;
  -webkit-transition: right 400ms cubic-bezier(1, 0, 0, 1), box-shadow 400ms ease;
          transition: right 400ms cubic-bezier(1, 0, 0, 1), box-shadow 400ms ease;
}
.button span:nth-last-of-type(-n+2) {
  z-index: 10;
  top: 4px;
  width: 116px;
  height: 72px;
  -webkit-transition: opacity 800ms ease 100ms;
          transition: opacity 800ms ease 100ms;
}
.button span:nth-last-of-type(-n+2):after {
  position: absolute;
  top: 26px;
  line-height: 1;
  font-family: "Open Sans";
  font-weight: 800;
  font-size: 24px;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 20px #ffffff;
}
.button span:nth-of-type(2) {
  left: 4px;
  background: -webkit-linear-gradient(top, #c0392b 0%, #d65548 100%);
  background: linear-gradient(to bottom, #c0392b 0%, #d65548 100%);
  border-top-left-radius: 36px;
  border-bottom-left-radius: 36px;
  box-shadow: 4px 4px 12px 4px rgba(0, 0, 0, 0.5) inset, 0 -2px 8px rgba(0, 0, 0, 0.4) inset;
}
.button span:nth-of-type(2):after {
  content: "OFF";
  left: 18px;
}
.button span:last-of-type {
  right: 4px;
  background: -webkit-linear-gradient(top, #2ecc71 0%, #7ee2a8 100%);
  background: linear-gradient(to bottom, #2ecc71 0%, #7ee2a8 100%);
  border-top-right-radius: 36px;
  border-bottom-right-radius: 36px;
  box-shadow: -4px 4px 12px 4px rgba(0, 0, 0, 0.5) inset, 0 -2px 8px rgba(0, 0, 0, 0.4) inset;
  opacity: 0.2;
}
.button span:last-of-type:after {
  content: "ON";
  right: 22px;
}
input[type="checkbox"]  {
  display: none;
}
input[type="checkbox"]:checked + .button span:first-of-type {
  right: 76px;
  box-shadow: 0 6px 4px rgba(255, 255, 255, 0.1) inset, 0 2px 0px rgba(255, 255, 255, 0.2) inset, 0 -6px 0px rgba(0, 0, 0, 0.2) inset, 0 -2px 0px rgba(0, 0, 0, 0.2) inset, 0 2px 2px rgba(0, 0, 0, 0.4), 4px 2px 8px rgba(0, 0, 0, 0.4), -2px 0 1px rgba(209, 245, 224, 0.5) inset;
}
input[type="checkbox"]:checked + .button span:nth-of-type(2) {
  opacity: 0.2;
}
input[type="checkbox"]:checked + .button span:last-of-type {
  opacity: 1;
}

input[type="checkbox"] + .button + div {
  display: none;
}
input[type="checkbox"]:checked + .button + div {
  display: block;
}

<input type="checkbox" id="btn">
<label class="button" for="btn">
  <span></span>
  <span></span>
  <span></span>
</label>
<div align="center"> conteúdo aqui que oculta ao selecionar OFF </div>