title: Simple JQuery accordion menu
body: <p>Hi I have a accordion menu in a wordpress site. The standard menu that came with the theme didn't do quite what I wanted so I've tried to customise it.</p>
  
  <p>the javascript code is..</p>
  
  <pre><code>//DROPDOWN SCRIPT
  $("#navbar &gt; li").click(function(){
  if(false == $(this).next().is(':visible')) {
      $('#navbar &gt; ul').slideUp(300);
  }
  $(this).next().slideToggle(300);
  });
  $('#navbar &gt; ul:eq(0)').show();
  </code></pre>
  
  <p>the css is...</p>
  
  <pre><code>#navbar {
  list-style: none;
  padding: 0 0 0 0;
  width: 233px;
  }
  
  #navbar li{
  text-align:center;
  display: block;
  font-weight: bold;
  margin-bottom: 2px;
  cursor: pointer;
  list-style: circle;
  height:29px;
  line-height:normal;
  }
  
  #navbar ul {
  
  list-style: none;
  padding: 0 0 0 0;
  display: none;
  
  }
  
  #navbar ul li{
  
  font-weight: normal;
  cursor: auto;
  background-color: #fff;
  padding: 0 0 0 7px;
  line-height:normal;
  
  }
  
  #navbar a {
  padding-top:5px;
  text-decoration: none;
  font-size: 19px;
  
  
  }
  
  #navbar a:hover {
  
  
  }
  #navbar li:first-child
  {margin:2px 0 2px 0;
  background:url(images/menuBG.png) 0px -90px;}
  
  #menu-item-12{
  background:url(images/menuBG.png) 0px -126px;}
  #menu-item-13{
  background:url(images/menuBG.png) 0px -163px;}
  #menu-item-14{
  background:url(images/menuBG.png) 0px -200px;}
  #menu-item-15{
  background:url(images/menuBG.png) 0px -236px;}
  #menu-item-16{
  background:url(images/menuBG.png) 0px -272px;}
  #menu-item-17{
  background:url(images/menuBG.png) 0px -344px;}
  #menu-item-18{
  background:url(images/menuBG.png) 0px -380px;}
  #menu-item-30{
  background:url(images/menuBG.png) 0px -416px;}
  #menu-item-19{
  background:url(images/menuBG.png) 0px -452px;}
  
  #navbar li#menu-item-12 a, #navbar li#menu-item-13 a,#navbar li#menu-item-14 a, 
  #navbar li#menu-item-29 a {
  color:#76a443   }
  </code></pre>
  
  <p>the HTML is...</p>
  
  <pre><code>&lt;ul id="navbar" class="menu"&gt;
  &lt;li id="menu-item-29" class="menu-item menu-item-type-custom
   menu-item-object-custom firstmenuitem"&gt;&lt;a href="http://#" class="item"&gt; Pests &lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom"&gt;
  &lt;a&gt; Products &lt;/a&gt;
  &lt;ul class="sub-menu"&gt;
  &lt;li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom"&gt;
  &lt;a href="#" class="item"&gt;Nemaslug&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-23" class="menu-item menu-item-type-custom menu-item-object-custom"&gt;
  &lt;a href="#" class="item"&gt;Vine Weevile Killer&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom"&gt;
  &lt;a href="#" class="item"&gt;NO ANTS!&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom"&gt;
  &lt;a href="#" class="item"&gt;Grow Your Own&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-52" class="menu-item menu-item-type-custom menu-item-object-custom"&gt;
  &lt;a href="http://LeatherJacketKiller" class="item"&gt;LeatherJacket Killer&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom"&gt;
  &lt;a href="#" class="item"&gt; Damage Identifier &lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom"&gt;
  &lt;a href="#" class="item"&gt; Pest Identifier &lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom"&gt;
  &lt;a href="#" class="item"&gt; About Nematodes &lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom"&gt;
  &lt;a href="#" class="item"&gt; Where to Buy &lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom"&gt;
  &lt;a href="#" class="item"&gt; Gardeners Forum &lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom"&gt;
  &lt;a href="#" class="item"&gt; Downloads &lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom"&gt;
  &lt;a href="http://#" class="item"&gt; News &lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom
  lastmenuitem"&gt;&lt;a href="#" class="item"&gt; Links &lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;               
  &lt;!-- Navbar ends here --&gt;   
  &lt;/div&gt;
  &lt;!-- Menu ends here --&gt;
  </code></pre>
  
  <p>It's not functioning properly, it's hiding the link below instead of displaying its sub links, if you click on "products" link you will see what I mean, there are 5 sub categories in products. but instead it hides the top level category below it.</p>
  
  <p>The site is also up on a test url. <a href="http://test5.cr8tivejuice.co.uk" rel="nofollow">http://test5.cr8tivejuice.co.uk</a></p>