Как написать скрипт jquery гармошка?

Question

Добрый день

Блоку Вопрос-ответ необходимо написать скрипт на jquery по типу accordion

Блок html (такие блоки будут повторяться):

<div class="question">
    <h3 class="question__title">Что влияет на стоимость услуг?</h3>
    <div class="question__icon"></div>
    <div class="question__wr">
        <p class="question__text text">Стоимость услуг зависят от нескольких факторов:</p>
    </div>
</div>

Как это должно работать:

При нажатии на question__title для тега question тег question--open добавляется и блок разворачивается, в то же время предыдущий блок сворачивается.

Вот мой скрипт, но он работает неправильно, он развертывает все блоки одновременно

$(".question__title").click(function() {
    $(".question").addClass("question--open");
    $(".question__title").click(function() {
        $(".question").removeClass("question--open");
    });
    return false;
});

Подскажите пожалуйста, как правильно написать скрипт?

Спасибо.

Answer 1

Попробуйте этот код

$(".question__title").click(function() {
 $("question--open").removeClass("question--open");
        $(this).addClass("question--open");
        return false;
    });

Answer 2

Вам просто нужно добавить класс question--open к элементу, по которому щелкнули, чтобы развернуть его и свернуть все другие теги, которые вам нужны, чтобы удалить этот класс из них.

$(".question__title").click(function() {
     $(".question").not($(this).closest("div.question")).removeClass("question--open");
     $(this).closest("div.question").toggleClass("question--open");
});

Строка $(".question").removeClass("question--open"); предназначена для удаления активного класса, чтобы свернуть их, и

$(this).closest("div.question").addClass("question--open");

- добавить активный класс к элементу, по которому щелкнули, для его расширения.