title: jQuery - toggleClass arrow up and arrow down icon change
body: <p>I have two containers, each with their own headers and arrow icons to indicate which direction the toggle can take place.</p>
  
  <p>On load, container 1 is open with the up arrow icon (to indicate the content can collapse). On load, container 2 is closed with the down icon (to indicate the content can be expanded).</p>
  
  <p>When I click on either of these, I want to use slideToggle and toggleClass to prevent the other box from closing, allowing the user to see the content within both box and the ability to collapse both.</p>
  
  <p>How would I ensure the arrow icons alternate when clicking each header?</p>
  
  <p>The most important part is having container 1 open on load, and container 2 closed on load. (resulting in opposite icons on load)</p>
  
  <p>Thanks in advance!</p>
  
  <pre><code>&lt;xsl:template name="Alert-Wrapper"&gt;
  &lt;xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row" /&gt;
  &lt;div id="alert-wrapper"&gt;
  
      &lt;div class="accordion-header expandable-header"&gt;
          &lt;span class="accordion-header-style"&gt;New Alerts&lt;/span&gt;
      &lt;/div&gt;
  
  
      &lt;div class="alert-item-container expandable-content"&gt;
          &lt;xsl:for-each select="$Rows"&gt;
              &lt;xsl:call-template name="alert-items"/&gt;
          &lt;/xsl:for-each&gt;    
  
          &lt;div class="view-more-alerts"&gt;
              &lt;a href="www.google.com"&gt;
                  &lt;span class="view-more-image"&gt;&lt;img src="/mountney.co.uk/images/Red-Arrow-View-More.png"&gt;&lt;/img&gt;&lt;/span&gt;
                  &lt;span class="view-more-text"&gt;View more alert items&lt;/span&gt;
              &lt;/a&gt;
          &lt;/div&gt;              
      &lt;/div&gt;          
      &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>The following jquery handles the expanding and collapsing of content.</p>
  
  <pre><code>    $('.expandable-header').click(function(){
  
      $(this).next('.expandable-content').slideToggle('slow');    
  
      });
  </code></pre>
  
  <p>I just need to modify the '.accordion-icon' background image to change (which is the background image of the header)</p>