title: How to toggle dropdown arrows
body: <p>This is the code i am using to hide and display div's with a slide toggle effect.</p>
  
  <pre><code>jQuery(document).ready(function() {
      jQuery(".option-content").hide();
      jQuery(".option-heading").click(function()
          {
              jQuery(this).next(".option-content").slideToggle(500);
          });
      });
  </code></pre>
  
  <p>However i would like to add some toggled arrows to show that the toggled div is up or down.</p>
  
  <p>This is what i have so far and it does half of what i would like it to do:</p>
  
  <pre><code>jQuery(document).ready(function() {
      jQuery(".option-content").hide();
      jQuery("#arrow-up").hide();
      jQuery(".option-heading").click(function()
          {
              jQuery(this).next(".option-content").slideToggle(500);
              jQuery("#arrow-up").toggle();
              jQuery("#arrow-down").toggle();
          });
  });
  </code></pre>
  
  <p>This toggles the arrow but there are two problems:</p>
  
  <ol>
  <li>The down arrow stays shown</li>
  <li>Every div toggles every arrow so when some divs are up and one is down they all show as down.</li>
  </ol>
  
  <p>Any ideas would be appriciated</p>