Please help me applying jquery on this menu

Question

I have a menu as below, I want to apply slidetoggle or something like that in jquery where all the child li are hidden by default, when clicked on for example "information 1" li than show it's children, information 2 remains hidden. And if i click information 2 than children of other li hides. Please help.

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

Answer 1

<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
  });
});

Answer 2

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.