Animating hide/show menu in jQuery

On a menu, I want to apply slide-toggle or something like that in jQuery where all the children of li are hidden by default. When li is clicked it shows it's direct children. Showing children of li also hides all other children.

<ul id="navlist">
    <li>Information 1<ul>
        <li>apple1</li>
        <li>Mango1</li>
        <li>Banana1</li>
        </ul>
    </li>
    <li>Information 2<ul>
        <li>apple2</li>
        <li>Mango2</li>
        <li>Banana3</li>
        </ul>
    </li>
    <li>开发者_运维百科Information 3<ul>
        <li>apple3</li>
        <li>Mango3</li>
        <li>Banana3</li>
        </ul>
    </li>

<ul id="MyMenu">
  <li>
    info 1
    <ul class="inner">
       <li>apple1</li>
       <li>mango1</li>
       <li>banana1</li>
    </ul>
  </li>
  <li>
    info 2
    <ul class="inner">
       <li>apple2</li>
       <li>mango2</li>
       <li>banana2</li>
    </ul>
  </li>
  <li>
    info 3
    <ul class="inner">
       <li>apple3</li>
       <li>mango3</li>
       <li>banana3</li>
    </ul>
  </li>
</ul>

$(function(){
  $('#MyMenu > li').click(function(){
    $('#MyMenu .inner').hide();  //hide all
    $(this).find('ul.inner').show();  // show the clicked submenu
  });
});

lgalSt's answer will work for you. However, instead of reinventing the wheel, you may want to check out the Accordion (click to see the demo) in jQuery UI. It works great, jQuery UI works across all browsers (you won't have to worry about things not working in IE) and it's quick and easy to setup. You can also theme jQuery UI components so that you get a consistent look and feel across your site.