title: jQuery Toggle Dropdown Menu
body: <p>How could I write a section of jQuery so that when <strong>Trials</strong> is clicked that it will show the dropdown menu options:</p>
  
  <p><strong>Update:</strong></p>
  
  <pre><code>jQuery(document).ready(function () {
  
      $("a[href='http://sheep.local/cms/trials']").click(function(e){
          e.preventDefault(); // In case you don't want the link to open...
          $(this).next('ul').slideToggle();
      });
  });​
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>       &lt;div id="mainnavwrap"&gt;
              &lt;div id="mainnav" class="clearfix"&gt;
      &lt;ul class="menu"&gt;
      &lt;li class="first current"&gt;
          &lt;a href="http://sheep.local/cms/home"&gt;Home&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="http://sheep.local/cms/features"&gt;Features&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="http://sheep.local/cms/options"&gt;Options&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="http://sheep.local/cms/pumps-motors"&gt;Pumps &amp; Motors&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="http://sheep.local/cms/shows"&gt;Shows&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="http://sheep.local/cms/trials"&gt;Trials&lt;/a&gt;
          &lt;ul&gt;
              &lt;li class="first"&gt;
                  &lt;a href="http://sheep.local/cms/trials/mathews-trial"&gt;Mathews Trial&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="http://sheep.local/cms/trials/novatis-trial"&gt;Novatis Trial&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="http://sheep.local/cms/trials/waimati-vet-trial"&gt;Waimati Vet Trial&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="last"&gt;
                  &lt;a href="http://sheep.local/cms/trials/uk-scab-mite-trial"&gt;UK Scab Mite Trial&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="last"&gt;
          &lt;a href="http://sheep.local/cms/contact"&gt;Contact&lt;/a&gt;
      &lt;/li&gt;
  
      &lt;/ul&gt;
  &lt;/div&gt;
            &lt;/div&gt; 
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#wrapper #contentarea #blue_box .centerblue_txt ul li ul{
      width:190px;
      padding:5px 0 0 10px;
      display:none;
  }
  #wrapper #contentarea #blue_box .centerblue_txt ul li ul li{
      width:185px;
      padding:5px 0 5px 5px;
      border-top:1px dotted #424242;
      border-bottom:0px;
  }
  #wrapper #contentarea #blue_box .centerblue_txt ul li ul li a,
  #wrapper #contentarea #blue_box .centerblue_txt ul li ul li a{
      width:180px;
      padding:0 0 0 10px;
      font-size:12px;
      background:url(../img/liBullets.gif) no-repeat left 4px;
  }
  #wrapper #contentarea #blue_box .centerblue_txt ul li ul li#current a,
  #wrapper #contentarea #blue_box .centerblue_txt ul li ul li a:hover{
      color:#D1D1D1;
      background:url(../img/liBullets.gif) no-repeat left 4px;
  }
  #wrapper #contentarea #blue_box .centerblue_txt ul li a:hover, 
  #wrapper #contentarea #blue_box .centerblue_txt ul li a:active {
      background:#5490f3;
  }
  </code></pre>