title: jQuery accordion header arrows
body: <p>I have an accordion that is not behaving the way I want it to.  I want to have a list of sections that has a nice red arrow pointing to the right.  Then when I open it, I want the arrow to point down.  Problem is this is that the down arrow is not showing up.  Here is the fiddle: <a href="http://jsfiddle.net/bt_rox88/9w1o41df/" rel="nofollow">fiddle</a>. Thoughts?</p>
  
  <pre><code>&lt;div class="accordion"&gt;   
      &lt;h3 class="arrow-right"&gt;First Step&lt;hr/&gt;&lt;/h3&gt;
      &lt;div class="accordion-body"&gt;Content 1&lt;/div&gt;
  
      &lt;h3 class="arrow-right"&gt;Second Step&lt;hr/&gt;&lt;/h3&gt;
      &lt;div class="accordion-body"&gt;Content 2&lt;/div&gt;
  
      &lt;h3 class="arrow-right"&gt;Third Step&lt;hr/&gt;&lt;/h3&gt;
      &lt;div class="accordion-body"&gt;Content 3&lt;/div&gt;
  &lt;/div&gt;
  
      jQuery(function ($) {
  
          $(".accordion").accordion({
              clearstyle: true,
              collapsible: true,
              active: 0
          }); 
          $(".accordion h3").click(function () {  
             //here want all non selected section to have a right arrow
      $(this).siblings("h3").removeClass("arrow-down");
      $(this).siblings("h3").addClass("arrow-right");   
  
      //here I want the selected section to have a down arrow
      $(this).children("h3").removeClass("arrow-right");
      $(this).children("h3").addClass("arrow-down");             });
      });
  </code></pre>