Click to expand shall result in collapsing other opened items?

Question

when i click on the menu item, i want just that item to expand and rest shall collapse.

example: i click on item 1 to expand it, then i click on item 2. So, in this case item 1 shall collapse itself.

html

<ul class="footernav">
  <li>
    <a href="javascript:;" class="topToggle">Item 1</a>
    <div class="typeToggle typeCont">
    Link area one
    </div>
  </li>
  <li>
    <a href="javascript:;" class="topToggle">Item 2</a>
    <div class="typeToggle filterCont">Link area two</div>
  </li>
</ul>

Jquery

$(document).ready(function(){ 
  $(".topToggle").click( function () {  
   $(this).parent().children('.typeToggle').slideToggle();
  });
});

FIDDLE

Answer 1

You can slideUp() all .typeToggles before you slideToggle() the specific one.

$(".topToggle").click(function () {
        $(".typeToggle").slideUp();
        $(this).parent().children('.typeToggle').slideToggle();
    });

This will result in a UP/DOWN motion if you click the already expanded item but you could put in some checks to stop that if you wish.

Example fiddle

---

Edit:

This is what is known as an Accordion and many examples and plugins can be found on the web. jQuery UI provides this functionality you can see it here; if you don't want to recreate the functionality it is usually trivial to add a plugin and have it perform this for you.