Have Only One Drop Down Panel Open On Click Using Html, Js, And Css

I have a drop down menu list of links fixed on the left side of a web page I'm trying to build. I got the structure of the HTML and CSS here on w3 schools, but fit it to my page. I

Solution 1:

Hope this helps:

<script>var acc = document.getElementsByClassName("drop-down");

    for (i = 0; i < acc.length; i++) {
        acc[i].onclick = function() {
            var panel = this.nextElementSibling;
            var maxHeight = panel.style.maxHeight;

            //Collapse all divs firstvar divs = document.getElementsByClassName("drop-down-panel");
            for (i = 0; i < divs.length; i++) {
                 divs[i].style.maxHeight = null;
            };

            if (maxHeight)
                panel.style.maxHeight = null;
            else
                panel.style.maxHeight = panel.scrollHeight + "px"; 
        }
    }
</script>

Updated code based on comment from @Mr. Bungle

<scripttype="text/javascript">var acc = document.getElementsByClassName("drop-down");

    for (i = 0; i < acc.length; i++) {
        acc[i].onclick = function() {
            var panel = this.nextElementSibling;
            var maxHeight = panel.style.maxHeight;

            //Collapse all divs firstvar divs = document.getElementsByClassName("drop-down-panel");
            for (i = 0; i < divs.length; i++) {
                divs[i].style.maxHeight = null;
                divs[i].previousElementSibling.classList.remove("active");  //new code to remove "active" class for all headers (li tags)
            };

            this.classList.toggle("active");  //Moved this line from topif (maxHeight)
            {
                panel.style.maxHeight = null;
                this.classList.remove("active"); //Added this line to remove "active" class for the current header
            }
            else
                panel.style.maxHeight = panel.scrollHeight + "px"; 
        }
    } 
</script>

Solution 2:

Here you go with a solution https://jsfiddle.net/uoagaj4k/1/

var prevClick = -1;
dropPanel = function(t){
  var acc = document.getElementsByClassName("drop-down");

  for (i = 0; i < acc.length; i++) {  
    if(acc[i] === t){
    	t.classList.toggle("active");
      var panel = t.nextElementSibling;
      if(prevClick !== i) {
				panel.style.maxHeight = panel.scrollHeight + "px";
        prevClick = i;
      } else {
      	panel.style.maxHeight = "0px";
        prevClick = -1;
      }
    } else {
    	acc[i].classList.toggle("active");
      var panel = acc[i].nextElementSibling;
      panel.style.maxHeight = "0px";
    }
  }
}

ul {position: fixed;}

li {
    text-align: left;
    display: block;
    text-decoration: none;
}

li.drop-down {
    cursor: pointer;
    transition: 0s;
}

div.drop-down-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}

a.panel {
    text-align: left;
    display: block;
    text-decoration: none;
}

<ul><liclass="drop-down"onClick="dropPanel(this)">Header 1</li><divclass="drop-down-panel"><aclass="panel"href="#link1">Link 1</a><aclass="panel"href="#link2">Link 2</a></div><liclass="drop-down"onClick="dropPanel(this)">Header 2</li><divclass="drop-down-panel"><aclass="panel"href="#link3">Link 3</a></div><liclass="drop-down"onClick="dropPanel(this)">Header 3</li><divclass="drop-down-panel"><aclass="panel"href="#link4">Link 4</a><aclass="panel"href="#link5">Link 5</a></div></ul>

Solution is using vanilla JavaScript.

Teo things to notice:

• Preserving the previous click (used for toggling)
• onClick method is added as an HTML attribute

Hope this will help you.