Pure CSS (no jQuery), hide one div, show another? - css

Question

I want to do something like this, but i want the Collapse 2 to stay right under Collapse 1 when I show Content 1. Is that possible? I tried to arrange the code differently, but it just went crazy. :D
.collapse{
cursor: pointer;
display: block;
background: #cdf;
}
.collapse + input{
display: none; /* hide the checkboxes */
}
.collapse + input + div{
display:none;
}
.collapse + input:checked + div{
display:block;
}
<label class="collapse" for="_1">Collapse 1</label>
<input id="_1" type="radio" name="c1">
<div>Content 1</div>
<label class="collapse" for="_2">Collapse 2</label>
<input id="_2" type="radio" name="c1">
<div>Content 2</div>

Answer 1

A little bit tricky but its work!
section {
position: relative;
}
section > .content {
position: absolute;
top:100%;
left: 0;
}
.collapse{
cursor: pointer;
display: block;
background: #cdf;
}
.collapse + input{
display: none; /* hide the checkboxes */
}
.collapse + input + div{
display:none;
}
.collapse + input:checked + div{
display:block;
}
<section>
<label class="collapse" for="_1">Collapse 1</label>
<input id="_1" type="radio" name="c1">
<div class="content">Content 1</div>
<label class="collapse" for="_2">Collapse 2</label>
<input id="_2" type="radio" name="c1">
<div class="content">Content 2</div>
</section>
Fiddle demo

Answer 2

Your code actually works great. As far as making the content show up after the labels, that just means we have to change the HTML order, which means we cannot use the plus(adjacent sibling selector). instead we use general sibling selector (~) you can read more about that here http://www.w3schools.com/css/css_combinators.asp
Here is an example of your code using the tilde. note the content divs now need some kind of unique identifier like a class.
.collapse{
cursor: pointer;
display: block;
background: #cdf;
}
input{
display: none; /* hide the checkboxes */
}
input ~ .content{
display:none;
}
input#_1:checked ~ .content1, input#_2:checked ~ .content2{
display:block;
}
<label class="collapse" for="_1">Collapse 1</label>
<input id="_1" type="radio" name="c1">
<label class="collapse" for="_2">Collapse 2</label>
<input id="_2" type="radio" name="c1">
<div class="content content1">Content 1</div>
<div class="content content2">Content 2</div>