Cacher is the code snippet organizer for pro developers

@import "compass";
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

$white:   rgb(255,255,255);

$cs-gold: rgb(223,201,162);
$cs-navy: rgb(21,39,49);
$cs-navy-light: rgb(78, 96, 109);
$cs-grey: rgb(85,85,89);
$cs-grey-light: rgb(235,235,235);


body {
  background-color: $cs-navy;
  color: $white;
  font-size: 100%;
  font-weight: normal;
  font-style: normal;
  line-height: 1.5;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 1em;  
  font-weight: 400;
}


// ! Accordion

.accordion--faq {
  max-width: 550px;
  margin: 1em auto;

  .accordion__question {
    
    &:last-child {
      border-bottom: 1px solid $white;  
    }
  }
  
  .accordion__header {
    border-top: 1px solid $white;
    cursor: pointer;
    display: inline-block;
    letter-spacing: 0.031em;
    line-height: 2.3;
    padding: 0.5em 1em;
    width: 100%;
    
    &:hover,
    &:focus {
      span {
        color: $white;  
      }
    }
    
    &.is-active {
      span {
        color: $white;  
      }
    }
    
    span {
      display: inline-block;
      color: $cs-navy-light;
      line-height: 2.3;
      float: right;
    }
  }
  
  .accordion__heading {
    display: inline-block;
    margin: 0;
  }
  
  .accordion__content {
    display: none;
    padding: 1em;
  }
}

// Need to fix the span toggleClass

var accordionHeader = $('.accordion__header'),
    accordionContent = $('.accordion__content');

$(accordionHeader).click(function () {
  if ($(this).hasClass('is-active')){
      $(this).find('span').toggleClass('icon-arrow-up icon-arrow-down');
      $(this).next(accordionContent).slideUp('slow');
      $(this).removeClass('is-active');
  }
  else {
    // close other content
    $(accordionHeader).not(this).next(accordionContent).slideUp('slow');
    $(accordionHeader).not(this).removeClass('is-active');
    $(this).find('span').toggleClass('icon-arrow-up icon-arrow-down');
    
    //open clicked content
    $(this).next(accordionContent).slideDown('slow');
    // add is-active class
    $(this).addClass('is-active');
    //$(this).find('span').toggleClass('icon-arrow-down icon-arrow-up');
   
  }
});

<!-- Need to add ARIA -->
<div class="accordion accordion--faq">
  <section class="accordion__question">
    <header class="accordion__header">
      <h5 class="accordion__heading">Lets ask a question?</h5>
      <span class="icon-arrow-down"></span>
    </header>
    <div class="accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut massa lorem, eleifend vitae rhoncus viverra, hendrerit ac tellus.</p>
    </div>
   </section>
  <section class="accordion__question">
    <header class="accordion__header">
      <h5 class="accordion__heading">Lets ask a question?</h5>
      <span class="icon-arrow-down"></span>
    </header>
    <div class="accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut massa lorem, eleifend vitae rhoncus viverra, hendrerit ac tellus.</p>
    </div>
   </section>
</div>