javascript - Jquery to expand and collapse div on clicking a image -

my html looks like

<h3><a href="#" title="story title">story title</a>     <img class="expandstory" src="/images/plus.png" /></h3> <div class="description">short description story</div>  <h3><a href="#" title="story title">story title</a>     <img class="expandstory" src="/images/plus.png" /></h3> <div class="description">short description story</div> 

my jquery looks like

$('.description').hide(); $('.description:first').show(); $('.expandstory:first').attr('src','/images/minus.png'); $('.expandstory:first').addclass('collapsestory'); $(".expandstory").click(function()  {    if($(this).attr('class')=='expandstory') {        $(".description").slideup(500);        $(this).parent().nextall('.description:first').slidetoggle(500);        $(this).attr('src','/images/minus.png');        $(this).addclass('collapsestory');        $(this).removeclass('expandstory');    }    else {        $(".description").slideup(500);        $(this).attr('src','/images/plus.png');        $(this).addclass('expandstory');        $(this).removeclass('collapsestory');    } }); 

i making simple thing more complex , more on not working when expand/collapse div multiple times.

i cannot change html file. please provide me solution in jquery. in advance.

it's hard understand mean when it's 'not working'. mention stops working when expand/collapse <div>s multiple times, leads me believe have animation queue issues, can solved using stop().

try this:

$('.description').hide(); $('.description:first').show(); $('.expandstory:first').attr('src','/images/minus.png'); $('.expandstory:first').addclass('collapsestory'); $(".expandstory").click(function()  {    if($(this).attr('class')=='expandstory') {        $(".description").stop(true,false).slideup(500); //here..        $(this).parent().nextall('.description:first').stop(true,false).slidetoggle(500); //here..        $(this).attr('src','/images/minus.png');        $(this).addclass('collapsestory');        $(this).removeclass('expandstory');    }    else {        $(".description").stop(true,false).slideup(500); //and here..        $(this).attr('src','/images/plus.png');        $(this).addclass('expandstory');        $(this).removeclass('collapsestory');    } });