toggle dropdown on click, hide others using jquery

Question

Not sure why this does not work but I have 3 different dropdowns built, an element to click to trigger the dropdown, all is working as expected. My issue is I want to hide all the others when one is clicked, I have this working to a degree, yes they are all hiding when I click the one I want open but now when I click that same one to "close" or "toggle off" it remains open? How can I ensure the second click closes the current dropdown? much appreciated if anyone can help me out with this one

HTML:

<div class = "dropdown-input-div">Click to Trigger open this one</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>



<div class = "dropdown-input-div">Click to Trigger open this one</div>

<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>



<div class = "dropdown-input-div">Click to Trigger open this one</div>

<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>

jQuery:

  $('.form-dropdown-ul').hide();

$('.dropdown-input-div').on('click',function(){
  $('.form-dropdown-ul').hide();
  $(this).next('.form-dropdown-ul').toggle();
});

You could try $('+ .dropdown-input-div + .form-dropdown-ul', this).toggle();, or next().next().toggle() which is a little ugly — Taplar
– Taplar, Commented May 14, 2020 at 17:11
Or i've seen people grab the index of the element in all the elements, go to the next index, and operate upon it. — Taplar
– Taplar, Commented May 14, 2020 at 17:14

dale landry · Accepted Answer · 2020-05-15 06:31:32Z

Place $('ul').hide() before your click function to hide all the ul elements. Then when you trigger this on the elements next ul, it will only toggle that elements child. Hide all siblings of the selected elements next().siblings('ul').

Add: $(this).next().siblings("ul").hide();

$(document).ready(function() {
$("ul").hide();//<-- initially hide the UL elements
  $(".dropdown-input-div").click(function() {    
    $(this).next("ul").toggle(); //<-- toggle the next ul element of the selected DIV
    $(this).next().siblings("ul").hide(); //<-- hide all siblings of the selected ul
  });
});

<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 this one</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>



<div class="dropdown-input-div">Click to Trigger open this one</div>

<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>



<div class="dropdown-input-div">Click to Trigger open this one</div>

<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>

Collectives™ on Stack Overflow

toggle dropdown on click, hide others using jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related