CODEWITHSUNDEEP
javascriptjquery
hendy0817
hendy0817

Reputation: 1079

Jquery close all other dropdowns of same class when one is opened?

I have a few custom dropdown lists and my issue is that they are "overlapping" eachother when one on top is opened, so I was wondering if there was a way to close the other when the other one opens so only one can be open at a time using jQuery? I tried checking if the class was "display: block" and adding a class "display: none" to the other of the same class which sort of worked but then when clicking the trigger again the dropdown would not close.

HTML:

 trigger: <div class = "dropdown-input-div">Click to open</div>

<ul class="form-dropdown-ul" style="display: block;">
    <li class=" dropdown-list-item" id="list-item-0">
        <label class="dropdown-label">0-2 years ago</label></li>
    <li class="dropdown-list-item" id="list-item-1">
        <label class="dropdown-label">3-5 years ago</label></li>
    <li class="dropdown-list-item" id="list-item-2">
        <label class=" dropdown-label">5-8 years ago</label></li>
    <li class="dropdown-list-item" id="list-item-3">
        <label class="dropdown-label">8-10 years ago</label></li>
</ul>


<ul class="form-dropdown-ul" style="display: block;">
    <li class=" dropdown-list-item" id="list-item-4">
        <label class="dropdown-label">10-12 years ago</label></li>
    <li class="dropdown-list-item" id="list-item-5">
        <label class="dropdown-label">12-16 years ago</label></li>
    <li class="dropdown-list-item" id="list-item-6">
        <label class=" dropdown-label">16-20 years ago</label></li>
</ul>

jQuery:

 $('.dropdown-input-div').on('click',function () {
     if ($('.form-dropdown-ul').css('display') === 'block'){
       $('.form-dropdown-ul').css('display','none');
     }
  })

Upvotes: 0

Views: 200

Answers (2)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

I don't prefer to use condition like $('.form-dropdown-ul').css('display') === 'block'

ALWAYS -> Much easier to use toggleClass() , addClass() , removeClass() and the condition will be $(element).hasClass()

$(document).ready(function(){
  $(".dropdown-input-div").on("click" , function(){
    $(".form-dropdown-ul").toggleClass("opened");
  });
});
.form-dropdown-ul{
  display : none;
}
.form-dropdown-ul.opened{
  display : block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "dropdown-input-div">Click to Trigger open</div>

<ul class="form-dropdown-ul opened">
    <li class=" dropdown-list-item" id="list-item-0">
        <label class="dropdown-label">0-2 years ago</label></li>
    <li class="dropdown-list-item" id="list-item-1">
        <label class="dropdown-label">3-5 years ago</label></li>
    <li class="dropdown-list-item" id="list-item-2">
        <label class=" dropdown-label">5-8 years ago</label></li>
    <li class="dropdown-list-item" id="list-item-3">
        <label class="dropdown-label">8-10 years ago</label></li>
</ul>


<ul class="form-dropdown-ul">
    <li class=" dropdown-list-item" id="list-item-4">
        <label class="dropdown-label">10-12 years ago</label></li>
    <li class="dropdown-list-item" id="list-item-5">
        <label class="dropdown-label">12-16 years ago</label></li>
    <li class="dropdown-list-item" id="list-item-6">
        <label class=" dropdown-label">16-20 years ago</label></li>
</ul>

Note: This code will work with just two ul if you've more than two this is another thing

This is for more than two ul

$(document).ready(function(){
  $(".dropdown-input-div").on("click" , function(){
    var NumOfLists = $(".form-dropdown-ul").length - 1; // get number of lists , -1 because length starts with 1 and index starts with 0
    var GetOpenedListIndex = $(".form-dropdown-ul.opened").index(".form-dropdown-ul"); // get index of the opened list
    var NextToOpen = (GetOpenedListIndex < NumOfLists) ? (GetOpenedListIndex + 1) : 0; // get the next list to open
    $(".form-dropdown-ul").removeClass("opened").filter(":eq("+NextToOpen+")").addClass("opened");
  });
});
.form-dropdown-ul{
  display : none;
}
.form-dropdown-ul.opened{
  display : block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "dropdown-input-div">Click to Trigger open</div>

<ul class="form-dropdown-ul opened">
    <li class=" dropdown-list-item" id="list-item-0">
        <label class="dropdown-label">0-2 years ago</label></li>
    <li class="dropdown-list-item" id="list-item-1">
        <label class="dropdown-label">3-5 years ago</label></li>
    <li class="dropdown-list-item" id="list-item-2">
        <label class=" dropdown-label">5-8 years ago</label></li>
    <li class="dropdown-list-item" id="list-item-3">
        <label class="dropdown-label">8-10 years ago</label></li>
</ul>


<ul class="form-dropdown-ul">
    <li class=" dropdown-list-item" id="list-item-4">
        <label class="dropdown-label">10-12 years ago</label></li>
    <li class="dropdown-list-item" id="list-item-5">
        <label class="dropdown-label">12-16 years ago</label></li>
    <li class="dropdown-list-item" id="list-item-6">
        <label class=" dropdown-label">16-20 years ago</label></li>
</ul>

<ul class="form-dropdown-ul">
    <li class=" dropdown-list-item" id="list-item-4">
        <label class="dropdown-label">20-22 years ago</label></li>
    <li class="dropdown-list-item" id="list-item-5">
        <label class="dropdown-label">22-26 years ago</label></li>
    <li class="dropdown-list-item" id="list-item-6">
        <label class=" dropdown-label">26-30 years ago</label></li>
</ul>

Upvotes: 1

lakshitha madushan
lakshitha madushan

Reputation: 669

Just need to add else part

$('.dropdown-input-div').on('click', function () {
    if ($('.form-dropdown-ul').css('display') === 'block') {
        $('.form-dropdown-ul').css('display', 'none');
    } else {
        $('.form-dropdown-ul').css('display', 'block');
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "dropdown-input-div">Click to Trigger open</div>

<ul class="form-dropdown-ul opened">
    <li class=" dropdown-list-item" id="list-item-0">
        <label class="dropdown-label">0-2 years ago</label></li>
    <li class="dropdown-list-item" id="list-item-1">
        <label class="dropdown-label">3-5 years ago</label></li>
    <li class="dropdown-list-item" id="list-item-2">
        <label class=" dropdown-label">5-8 years ago</label></li>
    <li class="dropdown-list-item" id="list-item-3">
        <label class="dropdown-label">8-10 years ago</label></li>
</ul>


<ul class="form-dropdown-ul">
    <li class=" dropdown-list-item" id="list-item-4">
        <label class="dropdown-label">10-12 years ago</label></li>
    <li class="dropdown-list-item" id="list-item-5">
        <label class="dropdown-label">12-16 years ago</label></li>
    <li class="dropdown-list-item" id="list-item-6">
        <label class=" dropdown-label">16-20 years ago</label></li>
</ul>

Upvotes: 0

Related Questions