Div that appear after a click (only CSS3) - css

Question

I need to create an icon that shows a div (menu) after a click on it.
Is it possible with CSS3?
This is for the mobile version and I don't need the :hover solution.
PS: If the only solution is doing it with Javascript a link to something would be good too.
CSS
.nav{
color: black;
background-color:white;
height: 5vh;
width: 100vw;
}
.menu{
color: black;
background-color:green;
height: 90vh;
width: 90vw;
}
HTML
<div class="nav">
<!-- Font Awesome Icon -->
<i class="fa fa-bars"></i>
</div>

Answer 1

Theres a few different ways to do this, none of them are foolproof I believe, here's an example using the :focus method. http://fiddle.jshell.net/rpwe4kzy/4/
CSS
.hide{display: none;}
button:focus ~ .hide{ display: block;}
HTML
<div>
<button tabindex="0">Show text</button>
<p class="hide">Hidden type</p>
</div>
See here for more solutions, https://tympanus.net/codrops/2012/12/17/css-click-events/
Otherwise if you want to use JS I suggest utilising a simple jquery function. I'm guessing you have jquery in your project already otherwise just substitute it for a vanilla javascript function.
CSS
<style>
.hidden{ display: none;}
</style>
HTML
<div>
<button class="click-me">Click me</button>
<p class="show-me hidden">
Here is some text!
</p>
</div>
JavaScript
<script>
$( document ).ready(function() {
$('.click-me').on('click', function(){
$('.show-me').show();
});
});
</script>
Here's a working example of the jQuery way, https://jsfiddle.net/clintongreen/bu22op77/