i have two lists, currently Both lists are toggling at once, i want only one lists items should be visible at one time,
if i click on list one only list one items should be visible and vice versa.
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i ) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}<div class=" dropdown-btn font-bold text-lg text-gray-700 ml-4 mt-3 cursor-pointer">LIST ONE</div>
<div class="hidden">
<div class="cursor-pointer w-full border-gray-100 items-start border-b-2 " style="height:40px">
<div class=" text-base text-gray-700 ml-10 mt-7 ">option 1</a>
</div>
</div>
<div class="w-full border-gray-100 items-start border-b-2" style="height:40px">
<div class=" text-base text-gray-700 ml-10 mt-3"> option 2</a>
</div>
</div>
</div>
<div class="w-full border-gray-100 items-start border-b-2">
<div class="dropdown-btn font-bold text-lg text-gray-700 ml-4 mt-8 cursor-pointer" style="height:40px">LIST TWO
</div>
<div class="hidden">
<div class="w-full border-gray-100 items-start border-b-2" style="height:40px">
<div class=" text-base text-gray-700 ml-10 mt-1"><a href=>option 1</a></div>
</div>
<div class="w-full border-gray-100 items-start border-b-2" style="height:40px">
<div class=" text-base text-gray-700 ml-10 mt-3"><a href=>option 2</a></div>
</div>
</div>
</div>
</div>CodePudding user response：
You can delegate and toggle the hidden you already have
Note I added a class to the hidden div
const lists = document.querySelectorAll(".list")
const buttons = document.querySelectorAll(".dropdown-btn")
document.getElementById("container").addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("dropdown-btn")) {
tgt.classList.toggle("active");
const thisList = tgt.nextElementSibling;
const show = tgt.classList.contains('active')
lists.forEach(list => list.classList.toggle("hidden", !show || list !=thisList))
buttons.forEach(btn => btn.classList.toggle("active",btn === tgt && show))
}
});.hidden {
display: none;
}
.active {
color: red;
}<div id="container">
<div class=" dropdown-btn font-bold text-lg text-gray-700 ml-4 mt-3 cursor-pointer">LIST ONE</div>
<div class="hidden list">
<div class="cursor-pointer w-full border-gray-100 items-start border-b-2 " style="height:40px">
<div class=" text-base text-gray-700 ml-10 mt-7 "><a href="">option 1</a>
</div>
</div>
<div class="w-full border-gray-100 items-start border-b-2" style="height:40px">
<div class="text-base text-gray-700 ml-10 mt-3"><a href="">option 2</a>
</div>
</div>
</div>
<div class="w-full border-gray-100 items-start border-b-2">
<div class="dropdown-btn font-bold text-lg text-gray-700 ml-4 mt-8 cursor-pointer" style="height:40px">LIST TWO
</div>
<div class="hidden list">
<div class="w-full border-gray-100 items-start border-b-2" style="height:40px">
<div class=" text-base text-gray-700 ml-10 mt-1"><a href="">option 1</a></div>
</div>
<div class="w-full border-gray-100 items-start border-b-2" style="height:40px">
<div class=" text-base text-gray-700 ml-10 mt-3"><a href="">option 2</a></div>
</div>
</div>
</div>
</div>