Making a menu appear and disappear by clicking the same icon

Question

I'm trying to make a standard hamburger icon on a phone show a menu when clicked and make the menu disappear when clicked again. What I have does make the menu appear but not disappear when clicked again. This code doesn't seem to be doing it:

Javascript/Jquery:

<script>

function show( elem )

{
    var n=$(elem).is(":visible"); 

    if (n==false){

    $('#'+elem).show();
    }

    if (n==true) {
        $('#'+elem).hide();
    }
}
</script>

HTML/PHP

<table align="center"><tr><td><a href="#" onclick="show('link1')"><img src="images/hamburger.png"></a> </td></tr></table>

<div id="link1" class="dynamic_link" style="display:none">

  <?php

    phoneMenu(); 

    ?>

</div>

Answer 1

Try utilizing .toggle()

 // added `foodicon` `id` to `img`, // removed `onclick` from `html` $("#foodicon").on("click", function() { $("#link1").toggle() }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <table align="center"> <tr> <td> <a href="#"> <!-- assign `foodicon` `id` to `img` --> <img id="foodicon" src="http://lorempixel.com/100/100/food"> </a> </td> </tr> </table> <div id="link1" class="dynamic_link" style="display:none"> food menu </div>