title: Jquery to expand and collapse div on clicking a image
body: <p>My Html looks like</p>
  
  <pre><code>&lt;h3&gt;&lt;a href="#" title="story title"&gt;Story Title&lt;/a&gt;
      &lt;img class="expandstory" src="/images/plus.png" /&gt;&lt;/h3&gt;
  &lt;div class="description"&gt;Short description about the story&lt;/div&gt;
  
  &lt;h3&gt;&lt;a href="#" title="story title"&gt;Story Title&lt;/a&gt;
      &lt;img class="expandstory" src="/images/plus.png" /&gt;&lt;/h3&gt;
  &lt;div class="description"&gt;Short description about the story&lt;/div&gt;
  </code></pre>
  
  <p>My jquery looks like</p>
  
  <pre><code>$('.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');
     }
  });
  </code></pre>
  
  <p>I am making a simple thing more complex and more over this is not working when I expand/collapse the div multiple times.</p>
  
  <p>I cannot change the HTML file. Please provide me good solution in jquery. Thanks in advance.</p>