Toggle Error In Show Menu Button

Question

This is the code I want to use for my show-menu button to toogle show-hide main-menu. But when I use the code, it disappears the show-menu button itself which is shown without this code;

$("#show-menu").toggle(
      function() {
        $("#main-menu").show(500);
        $("#show-menu").attr('src','/img/logo.png');
      },
      function() {
        $("#main-menu").hide(500);
        $("#show-menu").attr('src','/img/logo.png');
      }
)

Answer 1

The toggle() method toggles between hide() and show() for the selected elements. Your code always run because it out of any function.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="show-menu" value="show"/>
<div id="main-menu">
  main menu
</div>
<script>
  $(document).ready(function(){
      $("#show-menu").click(function(){
          $("#main-menu").toggle();
      });
  });
</script>