Show div when checkbox id checked but under the all checkboxes - html

Question

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?

Answer 1

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>

Answer 2

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/

Answer 3

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>

Answer 4

I would use a script for this...and in a real application, I would use a model + templating engine.
(Vue engine sample)
This way you can put your output wherever you want and format however you like it. This way you can also load a new datamodel from the server(store your checkbox questions/values/answers in db somwhere) and it would redraw/update your entire page without needing any updates from you.
// HTML
<input type="checkbox" name="mycheckbox" id="mycheckbox1" value="1" />
<input type="checkbox" name="mycheckbox" id="mycheckbox2" value="2" />
<input type="checkbox" name="mycheckbox" id="mycheckbox3" value="3" />
<input type="checkbox" name="mycheckbox" id="mycheckbox4" value="4" />
<div id="activeCheckboxes"></div><!-- you can put this anywhere on the page -->
// JavaScript
const checkboxes = {
1: {checked: false, message: 'First checkbox checked'},
2: {checked: false, message: 'Second checkbox checked'},
3: {checked: false, message: 'Third checkbox checked'},
4: {checked: false, message: 'Fourth checkbox checked'}
};
const activeCheckboxes = document.getElementById('activeCheckboxes');
const updateCheckboxes = () => {
activeCheckboxes.innerHTML = '';
Object.keys(checkboxes).forEach((val) => {
let checkbox = checkboxes[val];
if (checkbox.checked) {
activeCheckboxes.innerHTML += '<div>'+checkbox.message+'</div><hr>';
}
});
};
$(document).ready(() => {
$('input[type]="checkbox"').click((evt) => {
checkboxes[evt.target.value].checked = evt.target.checked;
updateCheckboxes();
});
});
Sample Fiddle