<!-- FAQ -->
<div class="parent-container">
  <ul class="faq">
    <li>
      <h3 class="question">Frequently Asked Question?
        <div class="plus-minus-toggle collapsed"></div>
      </h3>
      <div class="answer">Answer. Donec vitae tellus risus. Aenean sed fermentum risus. Phasellus venenatis 
        ultricies dignissim. Nunc ante lectus, accumsan non porta at. Donec vitae tellus risus. Aenean sed 
        fermentum risus. Phasellus venenatis ultricies dignissim.</div>
    </li>
    <li>
      <h3 class="question">Frequently Asked Question?
        <div class="plus-minus-toggle collapsed"></div>
      </h3>
      <div class="answer">Answer. Donec vitae tellus risus. Aenean sed fermentum risus. Phasellus venenatis 
        ultricies dignissim. Nunc ante lectus, accumsan non porta at. Donec vitae tellus risus. Aenean sed 
        fermentum risus. Phasellus venenatis ultricies dignissim.</div>
    </li>
  </ul>
</div>
@import "compass";

// Fonts
$font-sans-family:sans-serif;
$font-serif-family:serif;
  
// Colors
$header-color:#090909;
$paragraph-color:#090909;

// Facts
$fact-question-color:$header-color;
$fact-question-color-active:#808080;

// Media Sizes
$mobile:"max-width:767px";

.parent-container {
  padding:0 20px 0 20px;
  max-width:800px;
  width:100%;
}
.faq {
  list-style:none;
  padding-left:40px;
  padding-right:20px;
  li {
    border-bottom:1px solid #999999;
    margin-bottom:15px;
    &.active {
      .answer {
        max-height:275px !important;
        padding-bottom:25px;
        transition: max-height 0.5s ease, padding-bottom 0.5s ease;
      }
      .question {
        color:$fact-question-color-active;
        transition:color 0.5s ease;
      }
    }
  }
  .answer {
    color:$paragraph-color;
    font-family:$font-serif-family;
    font-size:16px;
    line-height:24px;
    max-height:0;
    overflow:hidden;
    transition:max-height 0.5s ease, padding-bottom 0.5s ease;
  }
  .plus-minus-toggle {
    cursor: pointer;
    height: 21px;
    position: absolute;
    width: 21px;
    left:-40px;
    top:50%;
    z-index:2;

    &:before,
    &:after {
      background: #000;
      content: '';
      height: 5px;
      left: 0;
      position: absolute;
      top: 0;
      width: 21px;
      transition: transform 500ms ease;
    }

    &:after {
      transform-origin: center;
    }

    &.collapsed {
      &:after {
        transform: rotate(90deg);
      }

      &:before {
        transform: rotate(180deg);
      }
    }
  }
  .question {
    color:$fact-question-color;
    font-family:$font-sans-family;
    font-size:20px;
    font-weight:800;
    text-transform:uppercase;
    position:relative;
    cursor:pointer;
    padding:20px 0;
    transition:color 0.5s ease; 
    @media screen and ($mobile) {
      font-size:18px;
    }
  }
}

View Compiled
// Toggle Collapse
$('.faq li .question').click(function () {
  $(this).find('.plus-minus-toggle').toggleClass('collapsed');
  $(this).parent().toggleClass('active');
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js