Question

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>

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