Looking to incorporate a straightforward accordion drop-down menu using basic HTML and JS. The following presents the relevant JS, CSS, and HTML code.
var heading = document.getElementsByClassName("drop_title");
var headingNumber = heading.length;
for (var i = 0 ; i < headingNumber; i++) {
heading[i].addEventListener("click", () => {
document.querySelector('.accordion_box li ul').classList.toggle('drop_list')
});
}.accordion_box {
background: #004d7a;
font-family: 'Zen Kaku Gothic Antique', sans-serif;
color: white;
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
width:50%;
margin-top: 25%;
}
.accordion_box ul li {
list-style-type:none;
}
.drop_title {
font-size:17px;
padding:0 10px;
}
.drop_title:hover{
border-left: 5px solid #a8eb12;
border-bottom: 5px solid #a8eb12;
}
.accordion_box ul ul li a{
color:white;
font-size:14px;
text-decoration:none;
}
.accordion_box ul ul li a:hover{
border-left: 5px solid #a8eb12;
}
.drop_list{
display:none;
}
.accordion_box li.active ul{
display:block;
transition: all 2s ease-in-out;
}<div class="accordion_box">
<ul>
<li>
<h3 class="drop_title">Menu One</h3>
<ul class="drop_list">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li>
<h3 class="drop_title">Menu Two</h3>
<ul class="drop_list">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li>
<h3 class="drop_title">Menu Three</h3>
<ul class="drop_list">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li>
<h3 class="drop_title">Menu Four</h3>
<ul class="drop_list">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
</ul>
</div>After clicking on Menu One, I can toggle its list display, but oddly when selecting any other title, it collapses Menu One instead of revealing the correct associated list. What am I missing here?
I'd appreciate some guidance on this matter.