Why doesn't jQuery .toggle() work properly? -

I am wrapping up a mobile site and added the navigation section, toggle it when clicking the list icon. I should be seeing this for headers testing purposes, but whether it is visible or not, the toggle function is not working. Here is the page: sunsetwesterngardencollection.com/mobile/ (It sounds good).

Here is the html for triggers:

   & Lt; Ul & gt; & Lt; Li & gt; & Lt; An id = "toggle" href = "#" & gt; & Lt; Img src = "{site_url} /images-mobile/icon_main-menu.png" alt = "main menu" & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "{site_url} mobile / search" & gt; & Lt; Img src = "{site_url} /images-mobile/icon_search.png" alt = "Search Sunset" & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "{site_url} Mobile / Search-Retailer" & gt; & Lt; Img src = "{site_url} /images-mobile/icon_finder.png" alt = "retail locator" & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Div class = "clear" & gt; & Lt; / Div & gt; & Lt; / Header & gt;   
 Here's the html for the device in which to toggle it on and off:  
   gt; & Lt; Span & gt; Home & lt; / Time & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "{site_url} Mobile / Archive" & gt; & Lt; Img src = "/ images-mobile / bg_quick-nav.png" alt = "home" /> gt; & Lt; Span & gt; Collection & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "{site_url} Mobile / Search-Retailer" & gt; & Lt; Img src = "/ images-mobile / bg_quick-nav.png" alt = "home" /> gt; & Lt; Span & gt; Where to Buy & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "{site_url} mobile / blog" & gt; & Lt; Img src = "/ images-mobile / bg_quick-nav.png" alt = "home" /> & Lt; Span & gt; Our blog & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "http://www.facebook.com/SunsetWesternGardenCollection" & gt; & Lt; IMG src = "/ images-mobile / bg_quick-nav.png" alt = "home" /> & Lt; Span & gt; Let us get on Facebook & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "https://twitter.com/#!/sunsetplants" & gt; & Lt; IMG src = "/ images-mobile / bg_quick-nav.png" alt = "home" /> & Lt; Span & gt; Follow us on Twitter & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "{site_url} index2 /" & gt; & Lt; Img src = "/ images-mobile / bg_quick-nav.png" alt = "home" /> gt; & Lt; Span & gt; Go to full & lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt ;! - end # quick-nav - & gt;   
 I'm using jQuery here:  
  & lt ;! - script - & gt; & Lt; Script src = "http://code.jquery.com/jquery-1.9.1.js" & gt; & Lt; / Script & gt; & Lt; Script & gt; $ ("A # toggle"). Click (function () {$ ("# quick-nav") Toggle ("slow");}); & Lt; / Script & gt;   
 I tested it in isolation and it works properly, but on this page it is not. I need the eyes of the other couple to help me identify the problem, so I can fix it.  
 Thank you!   
 
 
 Keep your document binding. It is likely that your event binding is being executed before or after the document is loaded, before the existence of the element  
  $ (function () {$ ("a # toggle"). Function () {$ ("# quick-nav") Toggle ("slow");});});