FAQ met openklappers en fade in

faq.js

jQuery(function ($) {
  
  // faq

      $('.faq-question').on('click', function(e){
        e.preventDefault();
        var thisfaq = $(this).parent('.faq-set');
        var faqQ = $(this);
        var faqA = $(this).next('.faq-answer');

        if(thisfaq.hasClass('shown')){
          thisfaq.removeClass('shown');
          faqQ.attr('aria-expanded', false);
          faqA.attr('aria-hidden', true);
        } else {
          thisfaq.addClass('shown');
          faqQ.attr('aria-expanded', true);
          faqA.attr('aria-hidden', false);
        }

      });
});

faq.scss

.faq-set {

}

p.faq-question {
    font-weight: bold;
    cursor: pointer;
    margin-left: 1.7em;
    text-indent: -1.7em;


    &:before {
        content: "+";
        display: inline-block;
        width: 1.2em;
        height: 1.2em;
        border-radius: 50%;
        margin-right: .5em;
        background-color: var(--freedomPink-dark);
        color: var(--white);
        font-weight: normal;
        text-align: center;
        line-height: 1.1;
        text-indent: 0;
    }

    .shown & {
        margin-bottom: var(--vertSpace-xsm);
        &:before {
            content: "-";

        }
    }
}

.faq-answer {
    display: none;

    @include respond-to(small-screens){
        padding-left: 1.7em;
    }

    .shown & {
        display: block;
        animation: .5s fadeIn;
    }
}

//simple animation

@keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

faq.twig

<!-- {{ item.block }} -->
<div class="faq-set user-content">
    <p class="faq-question" role="button" tabindex=0 aria-expanded="false">{{ item.faq_question }}</p>
    <div class="faq-answer" aria-hidden="true">{{ item.faq_answer|raw }}</div>
</div>
<!-- /{{ item.block }} -->