Toggle a menu from the left

Question

I am trying to get a menu to slide from the left when I click on a link. I have been following JSFiddle without success. The div remains in one spot and does not slide. Based on the example the div should be hidden and slide into view with click then slide out when I click again. It starts off hidden then comes into view without sliding and does not slide back. I am very new to jQuery, but have been studying very hard.

In my master page I have set the scripts for the page:

<script src="/Scripts/jquery-1.11.1.js" type="text/javascript" ></script>     
<script type="text/javascript"  >
  $(document).ready(function () {
    $("#click").click(function () {
      $("#slider").toggle("slide", {
        direction: "left",
        distance: 280
      }, 500);
    });
  });
</script>
<a id="click" href="#" runat="server" style="position:relative;top:0px;">Slide</a>
<div id="wrapper">
 <div id="box">
  <div id="slider" runat="server" class=" divColCtr RoundBorder" style="display:none">
   //controls inside here
  </div>
 </div>
</div>

Is the problem that I am trying this on the master page? I need a menu for each page and would hate to think I have to add to each, but if so then that is fine.

Answer 1

A requirement for the fiddle you are trying to replicate is : jQuery UI 1.9.2

This can be downloaded here : http://blog.jqueryui.com/2012/11/jquery-ui-1-9-2/

On the left side of the jsFiddle you can see external requirements/dependencies

Include this just after your jquery reference and it should be fine.

Try this as your code :

    <script src="http://code.jquery.com/jquery-1.11.0.min.js" ></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript" 
></script> 


<script type="text/javascript"  >
  $(document).ready(function () {
    $("#click").click(function () {
      $("#slider").toggle("slide", {
        direction: "left",
        distance: 280
      }, 500);
    });
  });
</script>
<a id="click" href="#" runat="server" style="position:relative;top:0px;">Slide</a>
<div id="wrapper">
 <div id="box">
  <div id="slider" runat="server" class=" divColCtr RoundBorder" style="display:none">
   //controls inside here
  </div>
 </div>
</div>