Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Show div when checkbox id checked but under the all checkboxes

Tags:

html

css

checkbox

I have a form containing 20 checkboxes.

I want to show the content of a div when a checkbox is checked. I got a result like that

#toggle-content1 {
  display: none;
}

#mycheckbox1:checked~#toggle-content1 {
  display: block;
  height: 100px;
}

#toggle-content2 {
  display: none;
}

#mycheckbox2:checked~#toggle-content2 {
  display: block;
  height: 100px;
}
<input type="checkbox" name="mycheckbox" id="mycheckbox1" value="0" />
<div id="toggle-content1">
  This content should appear when the checkbox is checked
</div>
<input type="checkbox" name="mycheckbox" id="mycheckbox2" value="0" />
<div id="toggle-content2">
  This content should appear when the checkbox is checked
</div>

But if you give it a try the code snippet, you'll notice that the first checkbox move the second one(when opened the div), is there a way to leave the checkbox in one row and display the divs on the others?

The css world is new to me, there is a way to write that code for 20 checkbox without write the css for every div?

like image 942
alessandro buffoli Avatar asked Aug 08 '18 14:08

alessandro buffoli


People also ask

How do you checkbox is checked or not ID?

Checking if a checkbox is checked First, select the checkbox using a DOM method such as getElementById() or querySelector() . Then, access the checked property of the checkbox element. If its checked property is true , then the checkbox is checked; otherwise, it is not.

How can I check all checkboxes within a div using jQuery?

click(function(){ $(':checkbox'). prop("checked", true); alert("1"); }); $('#deselectChb'). click(function(){ $(':checkbox'). prop("checked", false); alert("2"); });


3 Answers

You can try something like this:

.content {
  display: none;
  width: 100%;
}

/*Use + to target only one .content*/
input[type=checkbox]:checked + .content {
  display: block;
  height: 50px;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

input[type=checkbox] {
  order: -1; /*make all the input on the top*/
}
<div class="container">
  <input type="checkbox" name="mycheckbox" value="0">
  <div class="content">
    0)This content should appear when the checkbox is checked
  </div>
  <input type="checkbox" name="mycheckbox" value="1">
  <div class="content">
    1)This content should appear when the checkbox is checked
  </div>
  <input type="checkbox" name="mycheckbox" value="2">
  <div class="content">
    2)This content should appear when the checkbox is checked
  </div>
  <input type="checkbox" name="mycheckbox" value="3">
  <div class="content">
    3)This content should appear when the checkbox is checked
  </div>
</div>
like image 188
Temani Afif Avatar answered Oct 23 '22 03:10

Temani Afif


I simply reordered your tags, input first then divs. But i'm not really sure that's what you want

#toggle-content1 {
  display: none;
}

#mycheckbox1:checked~#toggle-content1 {
  display: block;
  height: 100px;
}

#toggle-content2 {
  display: none;
}

#mycheckbox2:checked~#toggle-content2 {
  display: block;
  height: 100px;
}
<input type="checkbox" name="mycheckbox" id="mycheckbox1" value="0" />
<input type="checkbox" name="mycheckbox" id="mycheckbox2" value="0" />
<div id="toggle-content1">
  This content should appear when the checkbox1 is checked
</div>
<div id="toggle-content2">
  This content should appear when the checkbox2 is checked
</div>

http://jsfiddle.net/ScnQT/5539/

like image 28
Dasten Duranin Avatar answered Oct 23 '22 05:10

Dasten Duranin


please have a look below updated code, hope you will find the solutions.

.chkBox{
display:inline-block;
position:relative;
}

.chkTxt{
background:#fff;
padding:10px;
border:1px solid #ccc;
width:500px;
height:100px;
position:absolute;
top:100%;
left:0;
display:none;
}

.chkBox input[type="checkbox"]:checked + .chkTxt{
display:block;
}
<div class="chkBox">
  <input type="checkbox" name="mycheckbox" id="mycheckbox1" value="0" />
  <div class="chkTxt">This content should appear when the checkbox1 is checked </div>
</div>

<div class="chkBox">
  <input type="checkbox" name="mycheckbox" id="mycheckbox2" value="0" />
  <div class="chkTxt">This content should appear when the checkbox2 is checked </div>
</div>


<div class="chkBox">
  <input type="checkbox" name="mycheckbox" id="mycheckbox3" value="0" />
  <div class="chkTxt">This content should appear when the checkbox3 is checked </div>
</div>

<div class="chkBox">
  <input type="checkbox" name="mycheckbox" id="mycheckbox4" value="0" />
  <div class="chkTxt">This content should appear when the checkbox4 is checked </div>
</div>


<div class="chkBox">
  <input type="checkbox" name="mycheckbox" id="mycheckbox5" value="0" />
  <div class="chkTxt">This content should appear when the checkbox5 is checked </div>
</div>
like image 35
Nikesh Kumar Avatar answered Oct 23 '22 05:10

Nikesh Kumar