Mobile Navigation hide/show one button

http://stackoverflow.com/questions/24833998/mobile-navigation-hide-show-one-button

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div id="mobnavz"><a id="show">MENU</a>
</div> 
    <div class="target" style="display:none;" id="hide">
        <div id="mobnav">
         <ul>
		        <li>Home Security</li>
		        <li>Home Automation</li>
		        <li>Business Security</li>
		        <li>Business Automation</li>
		    </ul>
</div>
</div>

CSS

#mobnavz {
    background:black;
    width:auto;
    height:60px;
    color: #FFF;
    padding: 5px
}
#mobnav {
    margin: 0 auto;
    background:red;
    color: black
}
#mobnav ul {
    margin: 0;
    padding:0;
}
#mobnav ul li {
    list-style:none;
    float: none;
    padding:10px;
}

JavaScript

$(document).ready(function () {
         // This hides the Nav
         $("#hide").click(function () {
             $(".target").hide("slide", {
                 direction: "up"
             }, 500);
             $('#show').show();
             $('#hide').hide();
         });
         // This shows nav when button is clicked.
         $("#show").click(function () {
             $(".target").toggle("slide", {
                 direction: "up"
             }, 500);
              //$('#show').hide();
             $('#hide').show();
         });
         // This animated the toggle.
         if ($('.target').is(':visible')) {}
     });