Сделать правильное отображение иконок «открыт/закрыт» аккордеона на jQuery?

Question

[Natasha000]

У есть код аккордеона на jQuery для WordPress

body:not(.et-fb) .show-on-click, 
body:not(.et-fb) .toggle-on-click,
body:not(.et-fb) .rv_element { 
	display: none; 
}


.rv_button_opened:after { 
  z-index: 999 ;
  content: '\21' ;
  color: #c9c9c9 ;
font-size: 16px ;
  }
.rv_button_closed:after { 
  z-index: 999 ;
  content:"\4c" ;
  color: #FF6600 ;
font-weight: normal ;
font-size: 16px ;
}

jQuery(function($){
	var buttons = {
	'.rv_button_1': {
		'toggle': '.rv_element_1', 
		'hide'  : '.rv_element_2,.rv_element_3', 
		'show'  : ''
	},
	'.rv_button_2': {
		'toggle': '.rv_element_2', 
		'hide'  : '.rv_element_1,.rv_element_3', 
		'show'  : ''
	},
	'.rv_button_3': {
		'toggle': '.rv_element_3', 
		'hide'  : '.rv_element_1,.rv_element_2', 
		'show'  : ''
	}
};
	$.each(buttons, function(button, elements) {
		$(button).click(function(e){
			e.preventDefault();
			$(elements.toggle).slideToggle();
			$(elements.show).slideDown();
			$(elements.hide).slideUp();
			$(button).toggleClass('rv_button_opened rv_button_closed');
		});
	});
});

Каждой кнопке присвоен класс : rv_button_1 rv_button_closed ; rv_button_2 rv_button_closed и т.д.
Да скрываемой секции присвоен класс : rv_element rv_element_1 ; rv_element rv_element_2 и т.д.

Проблема в том что при открытой №1 секции и нажатии на другую секцию : секция №1 закрывается, а иконка этой секции остается прежней (не меняется на иконку "закрыт")

Необходимо чтобы когда секция закрыта показывалась иконка "закрыт", а когда открыта показывалась иконка "открыт"

вот фото

Стрела вверх это иконка "открыт"
Плюс это "закрыт"
Как видно из фото - там где секция ESSENTIALS закрыта отображается не та иконка , как и в случае с открытой секции FINAL TOUCHES

Проблема заключается (на сколько я понимаю) в этом

$(button).toggleClass('rv_button_opened rv_button_closed');

То есть к открытым кнопкам добавляются не классы rv_button_opened , а к закрытым наоборот
И в следствии этого происходит путаница иконок

Пробовала вот так сделать

$.each(buttons, function(button, elements) {
		$(button).click(function(e){
			e.preventDefault();
			$(elements.toggle).slideToggle();
			$(elements.show).slideDown();
			$(elements.hide).slideUp();
      $(this).toggleClass('rv_button_opened');
$(buttons).not(this).removeClass('rv_button_opened');
		});
	});

Ни чего не помогло - теперь что открыт или закрыт = везде одни "плюс"

Comments

[Дмитрий Марков]

Я извиняюсь , но что у тебя за жесть в стилях?

[Дмитрий Марков]

Ты можешь использовать this в each это будет текущая кнопка . И сделать примерное так

$(this).stop().slideDown()
$(buttons).not(this).stop().slideUp()

[Natasha000]

Дмитрий Марков, проблема не в работе аккордеона , а в правильном отображении иконки "+" и "стрелка вверх"
вот фото

Стрела вверх это иконка "открыт"
Плюс это "закрыт"
Как видно из фото - там где секция ESSENTIALS закрыта отображается не та иконка , как и в случае с открытой секции FINAL TOUCHES

[Дмитрий Марков]

Natasha000, Сложо понять какой класс, что делает. Легче добавлять класс родителю и от него уже изменять внутренние элементы. И не понятно зачем нужен объект buttons(если будет 10 кнопок..).

Если хотите можете рассмотреть такой вариант .

<div className="accordion">
	<div className="accordion-header">
		<span className="accordion-header__text">ESENTINALS</span>
		<svg className="accordion-header__arrow"><use xlink:href="imgs/sprite.svg#arrow"/></svg>
	</div>
	<div className="accordion-body">content</div>
</div>
<div className="accordion">
	<div className="accordion-header">
		<span className="accordion-header__text">FINAL TOUCHES</span>
		<svg className="accordion-header__arrow"><use xlink:href="imgs/sprite.svg#arrow"/></svg>
	</div>
	<div className="accordion-body">content 2</div>
</div>

const accordions = $('.accordion');
accordions.each(thisAccordion => {
	const button = $(thisAccordion).find('.accordion-header');
	$(button).click(event => {
		event.preventDefault();

		accordions.not(thisAccordion).find('.accordion-body').stop().slideUp();
		accordions.not(thisAccordion).removeClass('active');

		$(thisAccordion).stop().find('.accordion-body').slideDown();
		$(thisAccordion).addClass('active');
	});
});

.accordion-header {
	&__arrow {
		transition: .3s;
	}
}
.accordion {
	&.active {
		.accordion-header__arrow {
			transform: ratate(180deg);
                        // или display: none; и отоброжать крестик
		}
	}
}

[Natasha000]

Дмитрий Марков, Спасибо за ответ, но к сожалению я верстать еще не умею. А этот код я использую в готовой теме Divi.
Я нашла его здесь
Проблема заключается (на сколько я понимаю) в этом

$(button).toggleClass('rv_button_opened rv_button_closed');

То есть к открытым кнопкам добавляются не классы rv_button_opened , а к закрытым наоборот
И в следствии этого происходит путаница иконок

Пробовала по вашему первому ответу
вот так сделать

$.each(buttons, function(button, elements) {
		$(button).click(function(e){
			e.preventDefault();
			$(elements.toggle).slideToggle();
			$(elements.show).slideDown();
			$(elements.hide).slideUp();
      $(this).toggleClass('rv_button_opened');
$(buttons).not(this).removeClass('rv_button_opened');
		});
	});

Ни чего не помогло - теперь что открыт или закрыт = везде одни "плюс"

[Дмитрий Марков]

toggleClass - дабвляет класс если нету и удаляет если есть, Вам для this нужно только добавлять класс addClass.
Иконки могут не меняться только по одной причине, у вас есть два класса , каждый класс отвечает за одну иконку. Получается Вам надо добавить ещё второй класс))
В итоге получится наверное что то такое

$(this).addClass('rv_button_opened');
$(this).removeClass('rv_button_closed');

$(buttons).not(this).removeClass('rv_button_opened');
$(buttons).not(this).addClass('rv_button_closed');

Можно короче (Это не точно. Давно не трогал jquery)

$(this).addClass('rv_button_opened').removeClass('rv_button_closed');

$(buttons).not(this).removeClass('rv_button_opened').addClass('rv_button_closed');

[Natasha000]

Дмитрий Марков, Спасибо , нашел решение - оказывается не работает вот это селектор $(buttons)

$(buttons).not(this).removeClass('rv_button_opened').addClass('rv_button_closed');

Я добавил ко всем кнопкам еще класс .rv_button
И сделал вот так

$.each(buttons, function(button, elements) {
		$(button).click(function(e){
			e.preventDefault();
			$(elements.toggle).slideToggle();
			$(elements.show).slideDown();
			$(elements.hide).slideUp();
      $(this).toggleClass('rv_button_opened rv_button_closed');
$(".rv_button").not(this).removeClass('rv_button_opened').addClass('rv_button_closed');
		});
	});

Теперь все работает корректно. Так и не понял в чем проблема с селектором $(buttons)

[Дмитрий Марков]

Походу buttons это уже объект jquery а мы ещё раз его обернули в $() :)