title: Accordion with up and down arrows
body: <p>I am trying to create a jQuery accordion with up and down arrows. I am using font awesome angle up and down for this purpose. Everything is going absolutely right the arrow down is shown when accordion is closed and the arrow up is shown when accordion is opened. But the only problem is that it only works when the user clicks over the particular accordion header. When the user clicks another header the arrows don't change.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var toggleHeader = $('.toggle-header');
  var toggleContent = $('.toggle-content');
  
  toggleHeader.click(function() {
    toggleHeader.removeClass('active');
    $(this).addClass('active');
    $(this).find('.toggle-arrow-down').hide();
    $(this).find('.toggle-arrow-up').show();
  
    if ($(this).next('div').is(':visible')) {
      $(this).next('div').slideUp();
      $(this).find('.toggle-arrow-down').show();
      $(this).find('.toggle-arrow-up').hide();
    } else {
      toggleContent.slideUp();
      $(this).next('div').slideDown();
    }
  
    return false;
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.toggle-header {
    border: 1px solid #ccc;
    padding: 10px;
    position: relative;
  }
  
  .toggle-header.active {
    background: #ccc;
  }
  
  .toggle-header .toggle-switch {
    position: absolute;
    top: 10px;
    right: 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="toggle"&gt;
    &lt;div class="toggle-header"&gt;
      &lt;h3&gt; This is toggle title &lt;/h3&gt;
      &lt;div class="toggle-switch"&gt;
        &lt;i class="fa fa-angle-up arrow-up"&gt;&lt;/i&gt;
        &lt;i class="fa fa-angle-down arrow-down"&gt;&lt;/i&gt;
      &lt;/div&gt;
      &lt;div class="toggle-content"&gt;
        This is the paragraph
      &lt;/div&gt;
      &lt;div class="toggle"&gt;
        &lt;div class="toggle-header"&gt;
          &lt;h3&gt; This is toggle title &lt;/h3&gt;
          &lt;div class="toggle-switch"&gt;
            &lt;i class="fa fa-angle-up arrow-up"&gt;&lt;/i&gt;
            &lt;i class=" fa fa-angle-down arrow-down"&gt;&lt;/i&gt;
          &lt;/div&gt;
          &lt;div class="toggle-content"&gt;
            This is the paragraph
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>