title: jquery slide menu, collapse all menus by default
body: <p>I have stolen a script off an <a href="http://sarfraznawaz.wordpress.com/2010/03/09/creating-stylish-sliding-menu-with-jquery/" rel="nofollow">internet</a> tutorial that allows for a jquery sliding menu.</p>
  
  <p>The menu works great except by default the first parent link is expanded. I want to have all the parent menu items closed by default.</p>
  
  <p>Here is the javascript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function(){
      // hide all links except for the first
      $('ul.child:not(:first)').hide();
      $("a.slide:first").css("background-color","");
      // for image
      // $("a.slide:first").css("background-image","url('path')");
  
      $('ul.parent a.slide').click(function(){
          $('ul.parent a.slide').css("background-color","");
  
          $('ul.parent a.slide').hover(function(){
              $(this).css("background-color","");
          });
  
          $('ul.parent a.slide').mouseout(function(){
              $(this).css("background-color","");
          });
  
          $(this).mouseout(function(){
              $(this).css("background-color","");
          });
  
          $(this).css("background-color","");
  
  
          // slide all up
          $('ul.child').slideUp('slow');
  
          // show the links of current heading
          $(this).next().find('a').show();
  
          // slide down current heading
          $(this).next().slideDown('fast');
  
          // prevent default action
          return false;
      });
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>The complete page code is:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;title&lt;/title&gt;
  &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(function(){
      // hide all links except for the first
      $('ul.child:not(:first)').hide();
      $("a.slide:first").css("background-color","");
      // for image
      // $("a.slide:first").css("background-image","url('path')");
  
      $('ul.parent a.slide').click(function(){
          $('ul.parent a.slide').css("background-color","");
  
          $('ul.parent a.slide').hover(function(){
              $(this).css("background-color","");
          });
  
          $('ul.parent a.slide').mouseout(function(){
              $(this).css("background-color","");
          });
  
          $(this).mouseout(function(){
              $(this).css("background-color","");
          });
  
          $(this).css("background-color","");
  
  
          // slide all up
          $('ul.child').slideUp('slow');
  
          // show the links of current heading
          $(this).next().find('a').show();
  
          // slide down current heading
          $(this).next().slideDown('fast');
  
          // prevent default action
          return false;
      });
  });
  
  &lt;/script&gt;
  
  &lt;style type="text/css"&gt;
  
  a
  {
      //outline:none;
  }
  
  ul
  {
      list-style:none;
  }
  
  ul.parent
  {
      margin:0px;
  }
  
  ul.parent a
  {
      display:block;
      //width:200px;
      //border-bottom:1px solid #336699;
      //background:#3399FF;
      //color:#FFFFFF;
      //font-weight:bold;
      //text-decoration:none;
      //padding:0px;
      //margin: 0;
  
  }
  
  ul.parent a:hover
  {
      //color:#000000;
      //background:#66CC66
  }
  
  ul.child a
  {
      //background:#333333;
      //color:#FFFFFF;
      //border-bottom:1px solid #f6f6f6;
      //font-weight:normal;
      //margin-left:-40px;
      //padding:7px;
      //width:200px;
      //display:block;
      //line-height:10px;
  }
  
  ul.child a:hover
  {
      //color:#3333333;
      //background:#CCCCCC
  }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;ul class="parent"&gt;
          &lt;li&gt;
              &lt;a href="#" class="slide"&gt;&lt;img src="images/organisationbutton.png" border=0&gt;&lt;/a&gt;            
              &lt;ul class="child"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/personbutton2.png" border=0&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/jobsbutton2.png" border=0&gt;&lt;/a&gt;&lt;/li&gt;
  
              &lt;/ul&gt;
  
           &lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;ul class="parent"&gt;
          &lt;li&gt;
              &lt;a href="#" class="slide"&gt;&lt;img src="images/risksbutton.png" border=0&gt;&lt;/a&gt;
  
              &lt;ul class="child"&gt;
                  &lt;a href="#" class="slide"&gt;&lt;img src="images/risksbutton3.png" border=0&gt;&lt;/a&gt;
                  &lt;a href="#" class="slide"&gt;&lt;img src="images/linkriskstojobsbutton.png" border=0&gt;&lt;/a&gt;
                  &lt;a href="#" class="slide"&gt;&lt;img src="images/linkhealthriskstopeople.png" border=0&gt;&lt;/a&gt;
              &lt;/ul&gt;
  
           &lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;ul class="parent"&gt;
          &lt;li&gt;
              &lt;a href="#" class="slide"&gt;&lt;img src="images/policiesbutton.png" border=0&gt;&lt;/a&gt;
  
              &lt;ul class="child"&gt;
                  &lt;a href="#" class="slide"&gt;&lt;img src="images/trainingrequiredbylaw.png" border=0&gt;&lt;/a&gt;
              &lt;/ul&gt;
  
           &lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;ul class="parent"&gt;
          &lt;li&gt;
              &lt;a href="#" class="slide"&gt;&lt;img src="images/trainingbutton.png" border=0&gt;&lt;/a&gt;
  
              &lt;ul class="child"&gt;
                  &lt;a href="#" class="slide"&gt;&lt;img src="images/trainingcoursesbutton.png" border=0&gt;&lt;/a&gt;
                  &lt;a href="#" class="slide"&gt;&lt;img src="images/medicalinterventionsbutton.png" border=0&gt;&lt;/a&gt;
                  &lt;a href="#" class="slide"&gt;&lt;img src="images/trainingdonebutton.png" border=0&gt;&lt;/a&gt;
              &lt;/ul&gt;
  
           &lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;ul class="parent"&gt;
          &lt;li&gt;
              &lt;a href="#" class="slide"&gt;&lt;img src="images/assessmentbutton.png" border=0&gt;&lt;/a&gt;
  
              &lt;ul class="child"&gt;
                  &lt;a href="#" class="slide"&gt;&lt;img src="images/individualtrainingbutton.png" border=0&gt;&lt;/a&gt;
                  &lt;a href="#" class="slide"&gt;&lt;img src="images/departmentcompliancebutton.png" border=0&gt;&lt;/a&gt;
              &lt;/ul&gt;
  
           &lt;/li&gt;
      &lt;/ul&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>any help would be appreciated as always, I am sure there is a simple solution to this but my javascript skills are in their infancy.</p>
  
  <p>Thanks again,
  R</p>