No jQuery : div onclick toggle div functions - html

Question

I am jQuery-phobic and new to css. So, please do not recommend to use jQuery.
I have two questions with my code.
[solved]When I click any one of .active divs, others go down. How to fix it on top?
How to change display from none to active as I click the div? (the code I wrote only show the div as long as I 'click' it)
.wrap{
text-align: center;
}
.hidden{
background: grey;
display : none;
}
.active{
background : lightcoral;
display: inline-block;
vertical-align: top;
}
.active:active > .hidden{
display: block;
margin : 0 0;
}
<div class = 'wrap'>
<div class = 'active'>
<h2>1</h2>
<div class ='hidden' onclick='layer_toggle()'>a</div>
</div>
<div class = 'active'>
<h2>2</h2>
<div class ='hidden'>b</div>
</div>
<div class = 'active'>
<h2>3</h2>
<div class ='hidden'>c</div>
</div>
</div>

Answer 1

If the usual javascript function suits you.
function switch_active(e) {
if (e.querySelector('.hidden').style.display == 'none') {
e.querySelector('.hidden').style.display = 'block';
} else {
e.querySelector('.hidden').style.display = 'none';
}
}
.wrap{
text-align: center;
}
.hidden{
background: grey;
display : none;
}
.active{
background : lightcoral;
display: inline-block;
vertical-align: top;
}
<div class = 'wrap'>
<div class = 'active' onclick='switch_active(this)'>
<h2>1</h2>
<div class ='hidden'>a</div>
</div>
<div class = 'active' onclick='switch_active(this)'>
<h2>2</h2>
<div class ='hidden'>b</div>
</div>
<div class = 'active' onclick='switch_active(this)'>
<h2>3</h2>
<div class ='hidden'>c</div>
</div>
</div>

Answer 2

You can easily fix the vertical alignment by adding
"vertical-align: top;" to your ".active" class in your CSS.
You say you don't want to use jQuery. I don't know if you are also plain javascript-phobic but if not, I would suggest use simple javascript since that is the easiest way. If you want to keep focussing on CSS, one way to do it is to make them checkboxes or radio buttons (depending on the effect you are looking for), making the checkbox/radio button invisible and styling them as your divs.
Also, there is no reason to be jQuery-phobic. It can look a bit overwhelming but the basics are really not that difficult! :)