Как улучшить аккордеон на чистом JS?

Question

[Вячеслав]

Написал скрипт для аккордеона на чистом JS. На текущий момент все элементы изначально закрыты. При клике на заголовок элемент аккордеона раскрывается, а предыдущий открытый закрывается. Хотелось бы улучшить его тем, чтобы при клике на заголовок текущего открытого элемента этот элемент сворачивался.

function accordeon() {
	for (let i = 0; i < accordBlocks.length; i++) {
		accordBlocks[i].style.display = 'none';//Первоначальное скрытие всех блоков аккордиона
	}

	for (let j = 0; j < accordTitles.length; j++) {
		accordTitles[j].addEventListener('click', () => {
			for (let i = 0; i < accordBlocks.length; i++) {
				accordBlocks[i].style.display = 'none';//Закрытие элемента аккордеона
				accordTitles[i].style.color = 'black';//Смена цвета заголовка элемента аккордеона
			}
			accordBlocks[j].style.display = 'block';//Раскрытие элемента аккордеона
			accordTitles[j].style.color = '#fa05f6';//Смена цвета заголовка элемента аккордеона
		});
	}
};	
accordeon();

Comments

[alex-1917]

ппц сколько кода. такое вообще на голом css можно сделать...
правда, на IE9 не проканает...)))

[Владимир Обабков]

Я могу тупо написать тебе код...
А могу послать гуглить со списком тем, которые надо знать про проектирование, абстракцию и базовые алгоритмы..
Что выберешь ты ?

Answer 1

[Виктор Янышев]

>accordBlocks[i].style.display = 'none';//Первоначальное скрытие всех блоков аккордиона

Просто сразу в верстке классом укажи hide. И удали этот цикл вообще.

for (let i = 0; i < accordBlocks.length; i++) {
        accordBlocks[i].style.display = 'none';//Закрытие элемента аккордеона
        accordTitles[i].style.color = 'black';//Смена цвета заголовка элемента аккордеона
      }
      accordBlocks[j].style.display = 'block';//Раскрытие элемента аккордеона
      accordTitles[j].style.color = '#fa05f6';//Смена цвета заголовка элемента аккордеона
    });

Перенеси это в другую функцию. Первая будет инициализировать аккордеон вещая на него слушателя события, а вторая вызываться коллбэком и проверять открыт аккордеон или нет.

Вот тебе пример:

function accordionInit() {
 // Вешаешь события
}

function accordionToggle(event) {
   // event.target - тут надо уточнить как определяется открыт или закрыт аккордион.
  if(event.target.classList.contains('hide')) {
     // Открываем
  } else {
     // Закрываем
   }

}

Реализуй его на процедурке. Потом пробуй реализовать на прототипах.

UPD: В случаие с accordionToggle цикл вообще не нужен

Comments

[alex-1917]

Реализуй его на процедурке. Потом пробуй реализовать на прототипах.

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

)))

[Виктор Янышев]

alex-1917, и вообще не понимать что там происходит ))))