javascript - How to make a menu appear (from the left) and disappear on button click -

i have created button , listview menu , want toggle left right below button on button click - should appear , disappear. please help. thank you.

$('#menu').click(function () {     if ($('#pageone').is(':visible')){         $('#pageone').fadeout();     } else {         $('#pageone').toggle('slide', {             direction: 'left'         }, 1000, function(){              $('#pageone').fadein();         });     } }); 

var isopen =true;  function togglemenu(){       if(isopen){      $('#pageone').hide('slow');      isopen = false;      }else{         $('#pageone').show('slow');         isopen = true;        }              }

#top  {    clear:both;    position:fixed;    top:0;    height:40%;    width:100%;    background-color:#dcdcdc;    text-align:center;  }  #bottom  {     clear:both;     position:fixed;     bottom:0;     height:60%;     width:100%;     background-color:#ffc878;     text-align:center;  }  #menu  {     position:fixed;     left:2%;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>  <div id="top">      <h2>knowledge point</h2>      <h2>self test</h2>      <input type="submit" value="submit" name="submit" class="btn btn-success">      <button id="menu" onclick="togglemenu()">☰</button>  </div>  <div id="bottom">  <div data-role="page" id="pageone" style="float:left;width :30%;">    <div data-role="main" class="ui-content">      <ul data-role="listview" data-inset="true">        <li data-icon="plus"><a href="question.html">add new question</a></li>      </ul>    </div>  </div>   <div id="question" style="float:right; width:70%;">  testing content  <br>  </div>  </div>