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

Написал скрипт для аккордеона на чистом 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();
  • Вопрос задан
  • 514 просмотров
Решения вопроса 1
villiwalla
@villiwalla
HTML-верстка

>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 цикл вообще не нужен
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы