Javascript-форум - Улучшить аккордеон

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Улучшить аккордеон (https://javascript.ru/forum/dom-window/75155-uluchshit-akkordeon.html)

Улучшить аккордеон

Написал скрипт для аккордеона на чистом 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();

Цитата:

Сообщение от DVV

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

уберите ~~пару циклов~~ все циклы кроме одного

<button id="btn">Кнопка</button>
		<div id="block" style="overflow:hidden; width:300px; transition:1s;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime corporis animi neque reprehenderit! Reprehenderit aliquam ea qui quae natus illo, amet, quidem, debitis eaque, dolorum ducimus. Velit, doloremque neque magnam.</div>
	<script>

	var height = getComputedStyle(block).height;
	block.style.height = '0px';
	btn.onclick = function(){
		block.style.height = getComputedStyle(block).height == '0px' ? height : '0px';
	};

	</script>

Думаю что это вам поможет

А какие именно, а то я что-то туплю?

DVV,
Все можно засунуть в один цикл и не создавать несколько, оставьте первый например.

отрывашка зависимая js

DVV,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

  <script>
document.addEventListener("DOMContentLoaded", accordeon);

function accordeon() {
    var accordTitles = document.querySelectorAll(".accordTitles");
    var accordBlocks = document.querySelectorAll(".accordBlocks");
    var index;

    function closeBlocks(i) {
        accordTitles[i].style.color = "black";
        accordBlocks[i].style.display = "none"
    }

    function openBlocks(i) {
        accordTitles[i].style.color = "#fa05f6";
        accordBlocks[i].style.display = "block";
    }
    [].forEach.call(accordTitles, function(btn, i) {
        closeBlocks(i);
        btn.addEventListener("click", function() {
           if (index !== i) openBlocks(i);
           if (index !== void 0) closeBlocks(index);
           index = index !== i ? i : void 0
        })
    })
};
  </script>
</head>

<body>
<div class="accordTitles">1</div>
<div class="accordTitles">2</div>
<div class="accordTitles">3</div>
<div class="accordTitles">4</div>
<div class="accordTitles">5</div>
<div class="accordBlocks">1</div>
<div class="accordBlocks">2</div>
<div class="accordBlocks">3</div>
<div class="accordBlocks">4</div>
<div class="accordBlocks">5</div>
</body>
</html>

рони, поубирал лишнее

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

	<script>

		document.addEventListener("DOMContentLoaded", accordeon);

		function accordeon() {
			var accordBlocks = document.querySelectorAll('.accordBlocks'),
			accordTitles = document.querySelectorAll('.accordTitles'),
			index = null;
			accordTitles.forEach((el,i)=>{
				accordBlocks[i].style.display = 'none';
				el.addEventListener('click', function(e){
					el.style.color = '#fa05f6';
					accordBlocks[i].style.display = 'block';
					if(index != null){
						accordBlocks[index].style.display = 'none';
						accordTitles[index].style.color = 'black';
					}
					index = index==i? null: i;
				});
			});
		}

	</script>
	
	<div class="accordTitles">1</div>
	<div class="accordTitles">2</div>
	<div class="accordTitles">3</div>
	<div class="accordTitles">4</div>
	<div class="accordTitles">5</div>
	<div class="accordBlocks">1</div>
	<div class="accordBlocks">2</div>
	<div class="accordBlocks">3</div>
	<div class="accordBlocks">4</div>
	<div class="accordBlocks">5</div>
</body>
</html>

Цитата:

Сообщение от j0hnik

рони, поубирал лишнее

нельзя открыть один и тотже блок

рони,
поправил :)

рони,
привет. Подскажи, почему в посте #6 при объявлении переменных каждая состоит из var...;

function accordeon() {
    var accordTitles = document.querySelectorAll(".accordTitles");
    var accordBlocks = document.querySelectorAll(".accordBlocks");
    var index;
}

Не проще писать через запятую, если они применяются "рядом" ?

function accordeon() {
  var
    accordTitles = document.querySelectorAll(".accordTitles"),
    accordBlocks = document.querySelectorAll(".accordBlocks"),
    index;
}

п.с. это не претензия) просто вопрос стилистики кода от менее опытного js-user

madeas,
это малюсенький косячок

madeas,
var var var - это считай как с красной строки, выделить переменную, стремление максимально облегчить восприятие кода.
сам чаще пишу через запятую.

Спасибо всем за помощь!:)