Reveal and Hide a Div on Checkbox Condition with CSS

Reveal and hide a div on checkbox condition with css

Currently there are no parent selectors in CSS, which is why that code doesn't work. The checkbox must be on the same level as div in question. Is there a CSS parent selector?

---

You can take it out of the label to put them on the same plane like shown here.

This example should work:

input[type=checkbox] {  display: none;}
input[type=checkbox]:checked~.remove-check {  display: none;}
input[type=checkbox]:checked~#email {  display: block;}
#email {  display: none;}

/*  ------ Just styles ------ */
input[type=text] {  width: 225px;  padding: 12px 14px;}
body {  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;  font-weight: normal;  font-style: normal;  font-size: 14px;  line-height: 1;  color: #222222;}
.btn {  width: auto;  background: #2ba6cb;  border: 1px solid #1e728c;  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;  color: white;  cursor: pointer;  display: inline-block;  font-family: inherit;  font-size: 14px;  font-weight: bold;  line-height: 1;  margin: 0;  padding: 10px 20px 11px;  position: relative;  text-align: center;  text-decoration: none;  -webkit-transition: background-color 0.15s ease-in-out;  -moz-transition: background-color 0.15s ease-in-out;  -o-transition: background-color 0.15s ease-in-out;  transition: background-color 0.15s ease-in-out;}
.btn:hover {  background: #006582;}

<label for="reveal-email" class="btn" style="width: 300px"> Sign Up</label><input type="checkbox" id="reveal-email" role="button">
<div id="email">  <form id="email-form" class="nice" action="" method="post">    <input class="input-text required email" type="text" name="EMAIL" id="id_email" placeholder="Email" />    <input type="hidden" name="name" id="id_name_email">    <a class="btn">Apply</a>  </form></div>

Show / hide a specific Div with checkboxes with HTML / CSS

You can use the General sibling combinator ~:

input:checked+#divMenu1 {  display: none;}
input:checked+#divMenu2 {  display: none;}

/** check both to show divMenu3 **/
#cb1:not(:checked)~#divMenu3,#cb2:not(:checked)~#divMenu3 {  display: none;}

<!--First Menu--><label for="cb1">[cb1]</label><input type="checkbox" style="display: none" id="cb1">
<div id="divMenu1">  This is divMenu1.</div>
<hr />
<!--Second Menu--><label for="cb2">[cb2]</label><input type="checkbox" style="display: none" id="cb2">
<div id="divMenu2">  This is divMenu2.</div>
<hr />
<!--Third Menu--><div id="divMenu3">  This is divMenu3.</div>
<hr />

Defaulting Show/Hide to Hide with pure CSS using checkbox

1. Change
   <input id="checkbox-privacymode" type="checkbox">
   to
   <input id="checkbox-privacymode" type="checkbox">

2. You will need to reposition your HTML elements so that the message is immediately after the checkbox.

3. Once the message is correctly positioned in the HTML code, in CSS you can select the message like this:

#checkbox-privacymode:checked + p {
   display: none;
}

close a div when a checkbox clicked with pure css

I think the only way to do this with pure css would be to have the checkbox as a direct sibling to the div:

#div-1 {display:none}#checkbox:checked + #div-1 {display:block;}

<input id="checkbox" type="checkbox" checked><div id="div-1">               Here is the content. </div>

Show / Hide div if checkbox selected

It might be something like that if I understood correct:

$(document).ready(function(){        $('input[value="Cats"]').click(function(){            if($(this).prop("checked") == true){                jQuery('input[value="Cats"]').parent('label').append('<div class="cats-notice">You love cats, nice one</div>');            }            else if($(this).prop("checked") == false){                jQuery(".cats-notice").remove();            }        });    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form><label><input name="dogs" type="checkbox" value="Dogs"> Dogs</label><label><input name="cats" type="checkbox" value="Cats"> Cats</label></form>

javascript Hide/show div on checkbox: checked/unchecked

You could use

var elem = document.getElementById('powermail_fieldwrap_331');
document.getElementById('powermail_field_doruovaciaadresa2_1').onchange = function() {
    elem.style.display = this.checked ? 'block' : 'none';
};

Demo

---

If you want to hide it by default, you could use #powermail_fieldwrap_331{display:none;}. But if you want to be sure, better use

var elem = document.getElementById('powermail_fieldwrap_331'),
    checkBox = document.getElementById('powermail_field_doruovaciaadresa2_1');
checkBox.checked = false;
checkBox.onchange = function doruc() {
    elem.style.display = this.checked ? 'block' : 'none';
};
checkBox.onchange();

Demo

---

Related Topics