Как добавить класс для оформления accordion?

[Sylon]

Всем привет! Помогите, пожалуйста, придумать как корректно добавить класс к аккордеону. Чтобы добавить знак открытой закрытой вкладки. Ниже код, он присваивает функцию клику, если она не срабатывает, то запускается открытие вкладки. Это нужно для того, чтобы проверять есть ли вложение в списке, если нет, то работает как ссылка. Html разметка может меняться так как категории добавляются, удаляются из админ панели. Буду рад любой помощи. В том числе и досканальному разбору моего скрипта потому, что не до конца его понимаю.

jQuery(function($){
$('.multi-accordion li > a').on('click', function (event) {
    var $this = $(this), $next = $this.next();
    if ($next.length) {
        $next.slideToggle().parent().siblings().children('ul').filter(':visible').slideToggle();
        event.preventDefault();
    }
});

<div>
    <ul class="multi-accordion">
        <li>
            <a href="http://agestor.ru/category-id3/category-level1a.html">Category level 1 (a)</a>
            <ul>
                <li>
                    <a href="http://agestor.ru/category-id3/category-level1a/category-level2a.html">Category level 2 (a)</a></li>
                    <ul>
                        <li><a href="http://agestor.ru/category-id3/category-level1a/category-level2a/category-level3a.html">Category level 3 (a)</a></li>
                        <li><a href="http://agestor.ru/category-id3/category-level1a/category-level2a/category-level3b.html">Category level 3 (b)</a></li>
                        <li><a href="http://agestor.ru/category-id3/category-level1a/category-level2a/category-level3c.html">Category level 3 (c)</a></li>
                    </ul>
                </li>
                <li><a href="http://agestor.ru/category-id3/category-level1a/category-level2b.html">Category level 2 (b)</a></li>
                <li><a href="http://agestor.ru/category-id3/category-level1a/category-level2c.html">Category level 2 (c)</a></li>
            </ul>
        </li>
        <li><a href="http://agestor.ru/category-id3/category-level1b.html">Category level 1 (b)</a></li>
        <li><a href="http://agestor.ru/category-id3/category-level1c.html">Category level 1 (c)</a></li>
    </ul>
</div>

 

[mdss]

$('.multi-accordion li > a').on('click', function (event) {
    var $this = $(this), $next = $this.next();
    if ($next.length) {
        $next.slideToggle().parent().toggleClass('opened').siblings().children('ul').filter(':visible').slideToggle();
        event.preventDefault();
    }
});

 

[Sylon]

$('.multi-accordion li > a').on('click', function (event) {
    var $this = $(this), $next = $this.next();
    if ($next.length) {
        $next.slideToggle().parent().toggleClass('opened').siblings().children('ul').filter(':visible').slideToggle();
        event.preventDefault();
    }
});

А если снова нажать и вкладки закроются, что тогда будет? Просто .slideToggle() он получается универсальный, если было открыто, закроет и наоборот.

 

[mdss]

А если снова нажать и вкладки закроются, что тогда будет? Просто .slideToggle() он получается универсальный, если было открыто, закроет и наоборот.

эту конструкцию я не трогал, я просто добавил для открытой вкладки класс opened. При закрытии класс удаляется

 

[Sylon]

Подскажите, пожалуйста, как сделать так, чтобы иметь оба класса для закрытой вкладки и открытой соответственно. И чтобы класс присваивался только если есть вложение во вкладке. А то html разметка может меняться по мере добавления и удаления категорий в админ-панели.

 

[mdss]

Подскажите, пожалуйста, как сделать так, чтобы иметь оба класса для закрытой вкладки и открытой соответственно. И чтобы класс присваивался только если есть вложение во вкладке. А то html разметка может меняться по мере добавления и удаления категорий в админ-панели.

зачем два класса то?
Это уже стилями делается.
Для просмотра ссылки Войди или Зарегистрируйся

Просто с классом opened переназначай стили

 

[Sylon]

зачем два класса то?
Это уже стилями делается.
Для просмотра ссылки Войди или Зарегистрируйся

Просто с классом opened переназначай стили

Ну а если такой момент, видим 4 вкладки, только в одной есть вложение, и только на ней стрелочка вниз, а когда ее нажимаем, стрелочка вверх показывает? Как такое сделать, если нет постоянной html разметки и вложение то есть, то нет.
С этой точки зрения поэтому скрипт так и выглядит, чтобы при нажатии на li > a если нет вложения, то срабатывает уже функции аккордеона. Прошу прощения, если сумбурно описываю, пытаюсь себе меню сделать, но опыта нет. Направьте, пожалуйста, в нужном направлении. Очень много вариаций в инете, от этого мало, что понятно даже со справочником.

 

[mdss]

Доработал

var arrow = $('.multi-accordion li > a').next();
if (arrow.length) {
  $(arrow).parent().append('V');
}
$('.multi-accordion li > a').on('click', function (event) {
    var $this = $(this), $next = $this.next();
    if ($next.length) {
        $next.slideToggle().parent().toggleClass('opened').siblings().children('ul').filter(':visible').slideToggle();
        event.preventDefault();
    }
});

Для просмотра ссылки Войди или Зарегистрируйся

Где

$(arrow).parent().append('V');

доделываешь под себя

 

[Sylon]

Доработал

var arrow = $('.multi-accordion li > a').next();
if (arrow.length) {
  $(arrow).parent().append('V');
}
$('.multi-accordion li > a').on('click', function (event) {
    var $this = $(this), $next = $this.next();
    if ($next.length) {
        $next.slideToggle().parent().toggleClass('opened').siblings().children('ul').filter(':visible').slideToggle();
        event.preventDefault();
    }
});

Для просмотра ссылки Войди или Зарегистрируйся

Где

$(arrow).parent().append('V');

доделываешь под себя

Посмотрите, пожалуйста, всё верно работает, остаётся только в css сделать оформление и вместо "V" будет svg знак на одном месте, только поворачиваться на 180 градусов при открытии вкладки? Для просмотра ссылки Войди или Зарегистрируйся Скажите, пожалуйста, а как .append('V') сделать не выводящим текст, а знак?

 

[mdss]

Посмотрите, пожалуйста, всё верно работает, остаётся только в css сделать оформление и вместо "V" будет svg знак на одном месте, только поворачиваться на 180 градусов при открытии вкладки? Для просмотра ссылки Войди или Зарегистрируйся Скажите, пожалуйста, а как .append('V') сделать не выводящим текст, а знак?

.append('<img src="v.svg" alt="">')