CODEWITHSUNDEEP
jquery
ktm
ktm

Reputation: 6085

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>

Upvotes: 0

Views: 81

Answers (2)

JasCav
JasCav

Reputation: 34652

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.

Upvotes: 0

IgalSt
IgalSt

Reputation: 1984

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

Upvotes: 1

Related Questions