Accordion List

_accordion.scss

.list-item {
  &:first-child {border-top: $base-border;}
  border-bottom: $base-border;
  .button {width: 15rem;}
}

.list-item-top {padding: 1.4rem 0;}

.accordion-trigger {
  position: relative;
  &:after {
    @extend %icon;
    content: "";
    position: absolute;
    right: 2rem;
    transform-origin: 50% 40%;
    transition: transform 400ms $base-timing;
  }
  .list-item.active & {
    &:after {transform: rotate(180deg);}
  }
  .list-item:not(.active) &:hover {
    cursor: pointer;
    background-color: $lightest-gray;
  }
}

accordion.html

<div class="accordion">
  <div class="list-item">
    <div class="list-item-top accordion-trigger">
      <span>Row Label</span>
    </div>
    <div class="accordion-inner">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </div>
  <div class="list-item">
    <div class="list-item-top accordion-trigger">
      <span>Row Label</span>
    </div>
    <div class="accordion-inner">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </div>
</div>

accordion.js

$('.accordion').each(function(){

  var allPanels = $(this).find('.accordion-inner').hide();

  $('.accordion-trigger').click(function() {
    $this = $(this);
    $target = $this.next();
    $parent = $this.parent();
    $others = $parent.parent().find('.accordion-inner')

    if(!$parent.hasClass('active')){
       $others.slideUp();
       $others.parent().removeClass('active');
       $parent.addClass('active');
       $target.slideDown();
    }
  });

})