Toggle and animate height of a ul within a li
<p>I have a list inside a li which needs to slide into view when the parent li is clicked.</p>

<p>My code works nicely but if i click any li all of the sub lists show where as i want it only to apply to the one that was clicked...</p>

<pre><code>$("#offering li").click(function() {
        $("#offering li ul").animate({height: "toggle"}, 1000);
    });


&lt;ul id="offering"&gt;
     &lt;li class="t current"&gt;&lt;a href="#solutions"&gt;&lt;span&gt;sage solutions&lt;/span&gt;&lt;/a&gt;
                    &lt;ul&gt;
                        &lt;li&gt;&lt;a href="#"&gt;50&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;200&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;CRM&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
     &lt;li class="m"&gt;&lt;a href="#management"&gt;&lt;span&gt;solutions&lt;/span&gt;&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;50&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;200&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;CRM&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
     &lt;li class="b"&gt;&lt;a href="#thirdparty"&gt;&lt;span&gt;third party additions&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
</code></pre>
