Close a panel when another is open

advertisements

I would like to make it for if one of these panels is open, it'll close when you've clicked on another panel. I looked at some other questions similar to mine but it seems they all uses a different method for the panels.

Heres a Fiddle of it: https://jsfiddle.net/3q87y2u8/

Heres the JS:

    var acc = document.getElementsByClassName("accordion");
    var i;

        for (i = 0; i < acc.length; i++) {
            acc[i].onclick = function() {
            this.classList.toggle("active");
            var panel = this.nextElementSibling;
            if (panel.style.maxHeight){
            panel.style.maxHeight = null;
    } else {
    panel.style.maxHeight = panel.scrollHeight + "px";
    }
   }
}

I'd also like to get the '+' to change color when hovered over. Kinda like the text currently does. I cant seem to call it out right in the CSS though.

Thank You!


You can get the element that is currently active and then remove the active class like so:

// Is an array of elements matching the selector
var active = document.getElementsByClassName('active');

// If there are any matching elements and it is not the same one that has just been clicked on
if (active.length && active[0] !== this) {
    active[0].classList.remove('active');
}

One side comment (you are of course free to ignore!): for the max-height you don't need to figure out the height (unless of course it interferes with how you have your page structure already set up). You can just use some large height and since it's the max-height you are setting and not the height it will automatically go to its natural height. You can also achieve this using just CSS, including the animation, and updating the hover text on the plus sign is included below as well.

// Set regular state height to 0 and add a transition effect
.panel {
    max-height: 0px;
    transition: max-height .25s ease;
}

// For whatever button is active find the adjacent panel and set its max height and a transition effect
.active + .panel {
  max-height: 250px;
  transition: max-height .25s ease;
}

// Here is where you change the color of the active and hovered plus/minus sign
button.accordion.active:after,
button.accordion:hover:after {
  color: red;
}

https://jsfiddle.net/xz2mpzg2/1/ https://jsfiddle.net/xz2mpzg2/2/