var panelItem = document.querySelectorAll('.panel-title'), bodyItem = document.querySelectorAll('.panel-body'); panelItem.forEach(function(item, i, panelItem) { item.addEventListener('click', function(e) { if (this.classList.contains('panel-active')) { bodyItem[i].classList.remove('active'); this.classList.remove('panel-active'); } else { item[i].classList.remove('panel-active'); panelItem[i].classList.remove('panel-active'); bodyItem[i].classList.remove('active'); this.classList.add('panel-active'); this.nextElementSibling.classList.add('active'); } }); }); 
 * { padding: 0; margin: 0; } .container { max-width: 700px; margin: 0 auto; padding-top: 20px; } .panel { margin-bottom: 5px; } .panel-title { padding: 10px 15px; background-color: #f5f5f5; border: 1px solid #ddd; font-size: 16px; color: #333; border-radius: 4px; font-family: 'Helvetica'; font-weight: 300; cursor: pointer; margin-bottom: 5px; } .panel-body { padding: 15px; border: 1px solid #ddd; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; display: none; margin-bottom: 10px; background: #fff; } .panel-active { margin-bottom: 0; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; text-decoration: underline; } .active { display: block; } 
 <div class="container"> <div class="panel-group"> <h3 class="panel-title">Group Item #1</h3> <div class="panel-body"> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Переписывается реторический за, щеке сбить, если большой языкового ему алфавит составитель силуэт меня страну рукопись языком вопроса толку оксмокс она. </div> <h3 class="panel-title">Group Item #2</h3> <div class="panel-body"> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Переписывается реторический за, щеке сбить, если большой языкового ему алфавит составитель силуэт меня страну рукопись языком вопроса толку оксмокс она. </div> <h3 class="panel-title">Group Item #3</h3> <div class="panel-body"> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Переписывается реторический за, щеке сбить, если большой языкового ему алфавит составитель силуэт меня страну рукопись языком вопроса толку оксмокс она. </div> </div> </div>

Hello. There is one problem, there is an accordion code, now it does not work, it is necessary that if one block is active, then by clicking on another block, the block that was active closes and the block that was clicked must open. The problem here is that I cannot delete a class for all previous headers that have an active class. In particular, an error on the 12th line, I do not understand much why such an error, but I do not understand how to solve it. I hope I clearly explained the essence of the problem; Code

  • one
    item is not an array, but an element of the panelItem array - Dimava
  • @Dimava I understood that, thanks for the example! - Lorax

3 answers 3

 var panelItem = document.querySelectorAll('.panel-title'), bodyItem = document.querySelectorAll('.panel-body'); panelItem.__proto__.forEach = [].__proto__.forEach; var activePanel; panelItem.forEach(function(item, i, panelItem) { item.addEventListener('click', function(e) { //show new thingy; this.classList.add('panel-active'); this.nextElementSibling.classList.add('active'); //hide old thingy if (activePanel) { activePanel.classList.remove('panel-active'); activePanel.nextElementSibling.classList.remove('active'); } //update thingy activePanel = (activePanel === this) ? 0 : this; }); }); 
 * { padding: 0; margin: 0; } .container { max-width: 700px; margin: 0 auto; padding-top: 20px; } .panel { margin-bottom: 5px; } .panel-title { padding: 10px 15px; background-color: #f5f5f5; border: 1px solid #ddd; font-size: 16px; color: #333; border-radius: 4px; font-family: 'Helvetica'; font-weight: 300; cursor: pointer; margin-bottom: 5px; } .panel-body { padding: 15px; border: 1px solid #ddd; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; display: none; margin-bottom: 10px; background: #fff; } .panel-active { margin-bottom: 0; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; text-decoration: underline; } .active { display: block; } 
 <div class="container"> <div class="panel-group"> <h3 class="panel-title">Group Item #1</h3> <div class="panel-body"> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Переписывается реторический за, щеке сбить, если большой языкового ему алфавит составитель силуэт меня страну рукопись языком вопроса толку оксмокс она. </div> <h3 class="panel-title">Group Item #2</h3> <div class="panel-body"> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Переписывается реторический за, щеке сбить, если большой языкового ему алфавит составитель силуэт меня страну рукопись языком вопроса толку оксмокс она. </div> <h3 class="panel-title">Group Item #3</h3> <div class="panel-body"> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Переписывается реторический за, щеке сбить, если большой языкового ему алфавит составитель силуэт меня страну рукопись языком вопроса толку оксмокс она. </div> </div> </div>

  • Corrected the opening of the last closed - Dimava
  • understood thanks! - Lorax

You can ease the code a bit by replacing the class .active for panel-body with the style .panel-active + .panel-body

And also, taking advantage of the fact that the getElementsByClassName function returns a live collection.

 var panelItem = document.querySelectorAll('.panel-title'), active = document.getElementsByClassName('panel-active'); Array.from(panelItem).forEach(function(item, i, panelItem) { item.addEventListener('click', function(e) { if (active.length > 0 && active[0] !== this) // если есть активный элемент, и это не тот по которому кликнули active[0].classList.remove('panel-active'); // убрать класс panel-active // изменить состояние класса panel-active на текущем элементе: добавить если не было, убрать если было. this.classList.toggle('panel-active'); }); }); 
 * { padding: 0; margin: 0; } .container { max-width: 700px; margin: 0 auto; padding-top: 20px; } .panel { margin-bottom: 5px; } .panel-title { padding: 10px 15px; background-color: #f5f5f5; border: 1px solid #ddd; font-size: 16px; color: #333; border-radius: 4px; font-family: 'Helvetica'; font-weight: 300; cursor: pointer; margin-bottom: 5px; } .panel-body { padding: 15px; border: 1px solid #ddd; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; display: none; margin-bottom: 10px; background: #fff; } .panel-active { margin-bottom: 0; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; text-decoration: underline; } .panel-active + .panel-body { display: block; } 
 <div class="container"> <div class="panel-group"> <h3 class="panel-title">Group Item #1</h3> <div class="panel-body"> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Переписывается реторический за, щеке сбить, если большой языкового ему алфавит составитель силуэт меня страну рукопись языком вопроса толку оксмокс она. </div> <h3 class="panel-title">Group Item #2</h3> <div class="panel-body"> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Переписывается реторический за, щеке сбить, если большой языкового ему алфавит составитель силуэт меня страну рукопись языком вопроса толку оксмокс она. </div> <h3 class="panel-title">Group Item #3</h3> <div class="panel-body"> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Переписывается реторический за, щеке сбить, если большой языкового ему алфавит составитель силуэт меня страну рукопись языком вопроса толку оксмокс она. </div> </div> </div>

  • thanks for the example! - Lorax

My version

 [].forEach.call(document.querySelectorAll('.panel-title'), function(item) { item.addEventListener('click', function(e) { display=(this.nextElementSibling.style.display=='block') ? 'none' : 'block'; [].forEach.call(this.parentNode.querySelectorAll('.panel-body'), function(panels) { panels.style.display='none'; }); this.nextElementSibling.style.display=display; }); }); 
 * { padding: 0; margin: 0; } .container { max-width: 700px; margin: 0 auto; padding-top: 20px; } .panel { margin-bottom: 5px; } .panel-title { padding: 10px 15px; background-color: #f5f5f5; border: 1px solid #ddd; font-size: 16px; color: #333; border-radius: 4px; font-family: 'Helvetica'; font-weight: 300; cursor: pointer; margin-bottom: 5px; } .panel-body { padding: 15px; border: 1px solid #ddd; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; display: none; margin-bottom: 10px; background: #fff; } .panel-active { margin-bottom: 0; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; text-decoration: underline; } .panel-active + .panel-body { display: block; } 
 <div class="container"> <div class="panel-group"> <h3 class="panel-title">Group Item #1</h3> <div class="panel-body"> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Переписывается реторический за, щеке сбить, если большой языкового ему алфавит составитель силуэт меня страну рукопись языком вопроса толку оксмокс она. </div> <h3 class="panel-title">Group Item #2</h3> <div class="panel-body"> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Переписывается реторический за, щеке сбить, если большой языкового ему алфавит составитель силуэт меня страну рукопись языком вопроса толку оксмокс она. </div> <h3 class="panel-title">Group Item #3</h3> <div class="panel-body"> Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Переписывается реторический за, щеке сбить, если большой языкового ему алфавит составитель силуэт меня страну рукопись языком вопроса толку оксмокс она. </div> </div> </div>