How to Automatically Close a Javascript Accordion when another accordion is clicked

Hey Guys!

I have several accordions in a site I’m designing. Basically the accordions display thumbnail versions of colors that you can click to change the color of a certain element. However, if you click one accordion, then you click another accordion, the colors overlap. I’m trying to make it so when another accordion is clicked, it automatically closes the previous accordion that was open. Here’s the code:

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

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        /* Toggle between adding and removing the "active" class,
        to highlight the button that controls the panel */
        this.classList.toggle("active");

        /* Toggle between hiding and showing the active panel */
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
        		panel.style.display = "block";
			$(".accordion, .big-accordion").accordion({ event: "mouseover" });
			$(".accordion .ui-accordion-header a").css({ padding:"1px 1px 1px 30px" });
		}
    }
}
</script>

Any ideas?

You can use mouseleave with combination setInterval function. Setting a specific time in ms you can “tell” the when to hide the accordion.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.