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();
});

Answer 1

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>