CSS - Show/hide collapse simple navigation when user clicks title - css

Question

I'd like to ask you for a little help. Well, I have to create a very simple navigation but I got a problem because I can't rewrite this code to make nav works without checkbox, it's very important - it shouldn't based on checkbox.
Ok, so first of all here is version based on checkboxes: http://codepen.io/anon/pen/dPaeZE
As you can see when user clicks TEST1 or TEST2 it expands list.
I want to make something similar to that but without checkboxes as I mentioned before, so here is my second codepen: http://codepen.io/anon/pen/azXGEQ
I tried this code:
.menu {
display: none;
}
/* show menu */
.nav-header:focus + .menu{
display: block;
}
But it doesn't work, when I click on TEST1 or TEST2 ul doesn't show. Something here is wrong but I don't know what exactly. :P
Ok, so that's all hope you could check it and help me a bit.

Answer 1

Not a CSS soludtion but a simply jQuery toggle works fine:
Codepen: http://codepen.io/anon/pen/yyZjdE
jQuery(document).ready(function(){
jQuery('.nav-header').click(function(){
jQuery(this).siblings('ul.menu').toggle();
});
});

Answer 2

Basically, a span cannot receive focus.
The optimal solution is to use an element that can receive focus like an anchor link or, for preference an actual button.
For ease, I have use an link here but a button would be preferable because Links are not buttons
/* basic style */
body {
margin-top: 30px;
}
a {
color: #EF9000;
text-decoration: none;
}
.container {
width: 230px;
margin: 0 auto;
}
/* nav */
.nav,
.menu {
padding: 0px;
margin: 0px;
text-align: center;
text-transform: uppercase;
list-style: none;
}
.menu li {
list-style: none;
display: list-item;
padding: 2px 0;
}
.menu li a {
display: block;
padding: 2px 0;
transition: all 0.2s ease-in-out;
}
.menu li a:hover {
background-color: #EF9000;
color: #F1F1F1;
}
/*
* Hide/show nav
*/
.nav-header {
cursor: pointer;
}
.menu {
display: none;
}
/* show menu */
.nav-header:focus + .menu {
display: block;
}
<div class="container">
<h1>Collpase menu NO checkbox</h1>
<ul class="nav">
<li>
Test 1
<ul class="menu">
<li>Something
</li>
<li>Another element
</li>
</ul>
</li>
<!--./test1-->
<li>
Test 2
<ul class="menu">
<li>Element
</li>
</ul>
</li>
<!--./test2-->
</ul>
</div>
<!--/.container-->
Stack Overflow Link to preferred answer.