Аккордеон - добавить стрелку к каждому элементу навигации?

Question

Я реализовал этот скрипт аккордеонов под Что мы делаем

Мне нужно добавить стрелки вверх и вниз к каждому элементу навигации, как показано на этой картинке .Где и как мне кодировать два состояния (неактивная стрелка и активная стрелка) в jQuery.Я думаю, мне нужно кодировать это в JQuery?

Answer 1

Вы можете сделать это с некоторыми простыми классами CSS, так как a имеют разные классы при открытии:

toggler toggler-closed и toggler toggler-opened

.toggler.toggler-opened {
    /* a background image on the right side with arrow down? */
}

.toggler.toggler-closed {
    /* a background image on the right side with arrow to the right? */
}

Answer 2

Это кажется относительно простым, хотя я, возможно, использую слишком много jQuery:

JQuery:

$(document).ready(
    function(){
        $('.toggler').each(function(){
            $('<span></span>').appendTo($(this));
        });
        $('.toggler-closed > span').text('▶');
        $('.toggler-opened > span').text('▼');
    });

CSS:

.toggler span {
  float: right;
  background-color: #eee;
  border-radius: 0.2em;
  display: inline-block;
  width: 1em;
  line-height: 1em;
}