I have three panels, one by another in a row. When I click on one of them, its width increases. When I click on any of other two, the panel which previously increased width shrinks and the newly clicked panel widens. However, I would like to be able to shrink the just widened panel by clicking on it. I am struggling to find the solution but with no effect.
This is my code:
var panels = document.querySelectorAll('.panel'),
activePanel = document.querySelectorAll('.panel.open');
function toggleOpen() {
panels.forEach(function(item) {
if (item.classList.contains('open')) {
item.classList.remove('open');
item.classList.add('closed');
}
});
this.classList.remove('closed');
this.classList.add('open');
}
function closeActivePanel() {
if (activePanel.length > 0) {
activePanel.removeClass('open');
activePanel.addClass('closed');
}
}
panels.forEach(function(panel) {
panel.addEventListener('click', toggleOpen);
});
activePanel.forEach(function(aPanel) {
aPanel.addEventListener('click', closeActivePanel);
});
<div class="panel panel1">
<div class="panel__overlay"></div>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="panel panel2">
<div class="panel__overlay"></div>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="panel panel3">
<div class="panel__overlay"></div>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsume</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
The function closeActivePanel just does not fire. And there is no error message.