title: jQuery Accordion arrow icons with seperate close button
body: <p>I've got an accordion with arrow icons indicating when a section is open and closed. Once the accordion is opened the arrow points down showing the content below it. </p>
  
  <p>However I've created a close button that gets appended into each section. This sits at the bottom of every section in the accordion. </p>
  
  <p>I want it so that once the close button is pressed the arrow changes it's state back to closed.</p>
  
  <pre><code>$(function() {
  $('#accordion h3').each(function(){ 
      var $set = $(this).nextUntil("h3");
      $set.wrapAll('&lt;div /&gt;');
  });
  
  $('#accordion').accordion({ collapsible:true, active:true, heightStyle:"content", disabled:true, animated: false});
  $('.ui-accordion-header').bind('click',function(){
      theOffset = $(this).offset();
      $(window).scrollTop(theOffset.top - 50);
  });
  
  $('#accordion h3.ui-accordion-header').click(function(){
      var _this = $(this);
      $('.ui-accordion-header-icon', _this).toggleClass('ui-icon-triangle-1-e ui-icon-triangle-1-s');
      _this.next().slideToggle();
      return false;
  });
  
      $('.ui-accordion-content').append('&lt;a href="#" class="close"&gt;Close&lt;/a&gt;&lt;div class="clearfix"&gt;&lt;/div&gt;');
  
      $('.close').click(function(){
          $(this).closest('.ui-accordion-content').toggleClass('ui-icon-triangle-1-s');
          $(this).parent().slideUp('slow', function(){
              $(window).scrollTop(theOffset.top - 50);
              var hidecollapsebutton = true;
              $('.ui-accordion-content').each(function(){
                  if($(this).css('display') == 'block')
                  {
                      hidecollapsebutton = false;
                  }
              });
  
              if(hidecollapsebutton)
              {
                  $('.accordion-expand-all').show();
                  $('.accordion-collapse-all').hide();
              }
  
          });
  
          return false;
      })
  
  });
  </code></pre>
  
  <p>Any help would be much appreciated. I can provide more information if it's needed. Thanks.</p>
  
  <p><a href="http://jsfiddle.net/EZT6A/" rel="nofollow">http://jsfiddle.net/EZT6A/</a></p>