Toggle this content and hide other content automatically using jQuery -

the following jquery code toggles current content:

$(document).ready(function() {   jquery(".content").hide();   //toggle componenet class content   $(".heading").click(function()   {     $(this).next(".content").slidetoggle(500);   }); }); 

demo

i want toggle (show/hide) current content while hiding other items same class. this, added "$(".content").hide();" (see here.) in case, when click element shown again, not toggled (hidden) shown again.

how can handle in case?

thanks help.

exclude "current" 1 hide():

$(document).ready(function() {   jquery(".content").hide();   //toggle componenet class content   $(".heading").click(function()   {     $(".content").not($(this).next(".content").slidetoggle(500)).hide();   }); }); 

jsfiddle: http://jsfiddle.net/trueblueaussie/ek8x5/6829/

i realise may cryptic, long version (of middle line) is:

 var $target = $(this).next(".content");  $(".content").not($target).hide();  $target.slidetoggle(500) 

note: better visual effect if slideup() , not hide() others:

e.g.

$(document).ready(function() {   jquery(".content").hide();   //toggle componenet class content   $(".heading").click(function()   {     $(".content").not($(this).next(".content").slidetoggle(500)).slideup();   }); }); 

jsfiddle: http://jsfiddle.net/trueblueaussie/ek8x5/6832/