Toggle and animate height of a ul within a li

I have a list inside a li which needs to slide into view when the parent li is clicked.

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...

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


<ul id="offering">
     <li class="t current"><a href="#solutions"><span>sage solutions</span></a>
                    <ul>
                        <li><a href="#">50</a></li>
                        <li><a href="#">200</a></li>
                        <li><a href="#">CRM</a></li开发者_运维技巧>
                    </ul>
                </li>
     <li class="m"><a href="#management"><span>solutions</span></a>
                  <ul>
                      <li><a href="#">50</a></li>
                      <li><a href="#">200</a></li>
                      <li><a href="#">CRM</a></li>
                  </ul>
              </li>
     <li class="b"><a href="#thirdparty"><span>third party additions</span></a></li>
            </ul>

$(this).find("ul").animate({height: "toggle"}, 1000);

Here you are applying the animation to all elements that match the selector #offering ul li, when infact you just need to apply it to the child ul of the li clicked.

Instead of the following

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

Try this

$("#offering li").click(function() {
        this.childNodes[0].animate({height:"toggle"},1000);
    });

I'm not as familiar with jQuery as I am with Mootools, so there may be a more appropriate way to get the child ul element than using the childNodes array - but you get the idea.