JavaScript для верстальщика. Урок 09. Создание аккордеона 2

Продолжение предыдущей темы в котором рассматривается вариант,где блоки с контентом не лежат непосредственно под блоком с заголовком. Тогда, чтобы объяснить скрипту, какой блок нужно открыть при клике по данному заголовку используем уже известный по предыдущим урокам приём, когда блоку с контентом присваиваем уникальный id, а потом его же указываем в атрибуте href заголовка.

Код выглядит следующим образом

$(".js-faq-title").on("click", function(e) {

        e.preventDefault();
        var $this = $(this),
            answerId = $this.attr("href");

        if( !$this.hasClass("active") ) {
            $(".js-faq-content").slideUp();
            $(".js-faq-title").removeClass("active");
        }

        $this.toggleClass("active");
        $(answerId).slideToggle();

    });

Кстати, только сейчас я поняла зачем нужна была эпопея с присвоением и удалением открытому блоку класса active, о чём шла речь ещё в предыдущей теме. Так как строка $(".js-faq-content").slideUp(); закрывает все открытые блоки с контентом, то следующая строка $(answerId).slideToggle(); будет не переключать открытие блока (открытый закрыть, закрытый открыть) а всегда открывать  блок, закрытый предыдущей строкой. Поэтому нам понадобилось на блок, который открываем, вешать переключатель класса $this.toggleClass("active"); и закрывать только те блоки, у которых такого переключателя нет.

if( !$this.hasClass("active") ) {
            $(".js-faq-content").slideUp();
            $(".js-faq-title").removeClass("active");
        }