jquery - Click to expand shall result in collapsing other opened items? -

when click on menu item, want item expand , rest shall collapse.

example: click on item 1 expand it, click on item 2. so, in 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 1     </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

you can slideup() .typetoggles before slidetoggle() specific one.

$(".toptoggle").click(function () {         $(".typetoggle").slideup();         $(this).parent().children('.typetoggle').slidetoggle();     }); 

this result in up/down motion if click expanded item put in checks stop if wish.

example fiddle

---

edit:

this known accordion , many examples , plugins can found on web. jquery ui provides functionality can see here; if don't want recreate functionality usually trivial add plugin , have perform you.