Не получается исправить анимацию Accardion

Question

у меня почему-то при нажатий - срабатывает все вкладки в Accardion. Не могу понять где бы, я мог ошибаться. Сколько времени смотрю в интеренете, так и не нашел.

Случаем не знаете в чем проблема?

$(document).ready(function() {

  $('.wrapper>article').not(':first-of-type').hide();


  $('.wrapper>.FAQ__title').click(function() {

    var findArticle = $(this).next();
    var findWrapper = $(this).closest('.wrapper');
    var FAQtitle = $(".FAQ__title")

    if (findArticle.is(':visible')) {
      findArticle.slideUp('fast');
      FAQtitle.removeClass('active');
    } else {
      findWrapper.find('>article').slideUp('fast');
      findArticle.slideDown('fast');
      FAQtitle.addClass('active');
    }
  });

});

.wrapper {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.FAQ__title {
  width: 100%;
  font-size: 15px;
  cursor: pointer;
  color: #005379;
  transition: color 0.2s linear;
}

.FAQ__title:before {
  content: "\02795";
  font-size: 11px;
}

.FAQ__title:hover {
  color: #960b19;
}

article {
  background: #F4FAFE;
  border-radius: 0 0 5px 5px;
  padding: 5px;
  color: black;
}

.FAQ__title.active:before {
  content: "\02796";
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <h1 class="FAQ__title"> заголовка </h1>
  <article class="FAQ__text"> текст
  </article>
<div class="wrapper">
  <h1 class="FAQ__title"> заголовка </h1>
  <article class="FAQ__text"> текст
  </article>
<div class="wrapper">
  <h1 class="FAQ__title"> заголовка </h1>
  <article class="FAQ__text"> текст
  </article>
</div>

Answer 1

var FAQtitle = $(".FAQ__title"); -> var FAQtitle = $(this);

Иначе вы выбираете все элементы с классом .FAQ__title, а не только тот, по которому кликаете.

$(document).ready(function() {
  $('.wrapper>article').hide();

  $('.wrapper>.FAQ__title').click(function() {

    var findArticle = $(this).next();
    var findWrapper = $(this).closest('.wrapper');
    var FAQtitle = $(this);

    if (findArticle.is(':visible')) {
      findArticle.slideUp('fast');
      FAQtitle.removeClass('active');
    } else {
      findWrapper.find('>article').slideUp('fast');
      findArticle.slideDown('fast');
      FAQtitle.addClass('active');
    }
  });

});

.wrapper {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.FAQ__title {
  width: 100%;
  font-size: 15px;
  cursor: pointer;
  color: #005379;
  transition: color 0.2s linear;
}

.FAQ__title:before {
  content: "\02795";
  font-size: 11px;
}

.FAQ__title:hover {
  color: #960b19;
}

article {
  background: #F4FAFE;
  border-radius: 0 0 5px 5px;
  padding: 5px;
  color: black;
}

.FAQ__title.active:before {
  content: "\02796";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <h1 class="FAQ__title">заголовка</h1>
  <article class="FAQ__text">текст</article>
</div>
<div class="wrapper">
  <h1 class="FAQ__title">заголовка</h1>
  <article class="FAQ__text">текст</article>
</div>
<div class="wrapper">
  <h1 class="FAQ__title">заголовка</h1>
  <article class="FAQ__text">текст</article>
</div>

Answer 2

Я попытался сделать получше, но чуть-чуть рывок в конце анимации происходит

$(document).ready(function() {
  const wrapper = $('.wrapper');
  const texts = $('.wrapper>.FAQ__text');
  texts.hide();
  wrapper.click(function(e) {
    const text = $(this).find('.FAQ__text');
    $(this).toggleClass("active");
    text.slideToggle();
  })
});

.wrapper {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

h1 {
  margin-bottom: 10px;
}

.FAQ__title {
  width: 100%;
  font-size: 15px;
  cursor: pointer;
  color: #005379;
  transition: color 0.2s linear;
}

.FAQ__title:before {
  content: "\02795";
  font-size: 11px;
}

.FAQ__title:hover {
  color: #960b19;
}

.FAQ__text {
  background: #F4FAFE;
  border-radius: 0 0 5px 5px;
  padding: 5px;
  color: black;
}

.FAQ__title.active:before {
  content: "\02796";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">
  <h1 class="FAQ__title">заголовка</h1>
  <article class="FAQ__text">текст</article>
</div>
<div class="wrapper">
  <h1 class="FAQ__title">заголовка</h1>
  <article class="FAQ__text">текст</article>
</div>
<div class="wrapper">
  <h1 class="FAQ__title">заголовка</h1>
  <article class="FAQ__text">текст</article>
</div>

БЛОГ НА HUSL

Не получается исправить анимацию Accardion

Ответы (2 шт):