Div that appear after a click (only CSS3)

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>

You can take this route with a checkbox: http://stackoverflow.com/questions/18752134/reveal-and-hide-a-div-on-checkbox-condition-with-css — Stephen C, Mar 23 '17 at 16:13

score 0 · Accepted Answer · answered Mar 24 '17 at 01:52

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/

Div that appear after a click (only CSS3)

1 Answers1