CODEWITHSUNDEEP
javascripthtmljquerycss
unkown53
unkown53

Reputation: 121

Display one drop down at time and close the others

I have two dropdown menus which are displayed when the user clicks them. They are hidden by default. Is there a way to close the dropdown which is not being clicked?. For example the 'client' menu should be closed once I click the 'car' menu.

/* display the dropdown when client, vehcile or module are clicked */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content */
for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block")
      dropdownContent.style.display = "none";
    else
      dropdownContent.style.display = "block";
  });
}
.dropdown-btn {
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
  text-transform: uppercase;
  font-family: LinetoCircular;
  display: block;
  padding-left: 20px;
  z-index: 0;
}

#wrapper {
  display: flex;
}


/* hidden by default, make the content shifts under the title */

.dropdown-container {
  display: none;
  font-size: 18px;
  padding-top: 10px;
  background-color: #575757;
}

.dropdown-container a {
  color: white;
  padding-left: 30px;
}

.dropdown-container a:hover {
  background-color: #414141;
}
<div>
  <button class="dropdown-btn">
        <div>Client</div>
    </button>
  <div class="dropdown-container">
    <a href="client_properties/" style="height: 30px;"><span style="font-size: 24px;">+</span>Add new</a><br>
    <a href=''>first element</a><br>
    <a href=''>second element</a><br>
  </div>
  <div>
    <button class="dropdown-btn">
            <div>Car</div>
        </button>
    <div class="dropdown-container">
      <a href="client_properties/" style="height: 30px;"><span style="font-size: 24px;">+</span>Add new</a><br>
      <a href=''>first element</a><br>
      <a href=''>second element</a><br>
    </div>
  </div>
</div>

If there is a possible way to not change a lot in the code, that would be appreciated.

Live demo: https://jsfiddle.net/2c9pbyvo/1/

Upvotes: 1

Views: 368

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

To do what you require, loop through all the .dropdown-btn elements and hide the ones which are not relevant to the clicked button:

Array.from(document.querySelectorAll('.dropdown-container')).forEach(el => {
  if (el !== dropdownContent)
    el.style.display = 'none';
});


var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    var dropdownContent = this.nextElementSibling;

    Array.from(document.querySelectorAll('.dropdown-container')).forEach(el => {
      if (el !== dropdownContent)
        el.style.display = 'none';
    });

    if (dropdownContent.style.display === "block")
      dropdownContent.style.display = "none";
    else
      dropdownContent.style.display = "block";
  });
}
.dropdown-btn {
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
  text-transform: uppercase;
  font-family: LinetoCircular;
  display: block;
  padding-left: 20px;
  z-index: 0;
}

#wrapper {
  display: flex;
}

/* hidden by default, make the content shifts under the title */
.dropdown-container {
  display: none;
  font-size: 18px;
  padding-top: 10px;
  background-color: #575757;
}

.dropdown-container a {
  color: white;
  padding-left: 30px;
}

.dropdown-container a:hover {
  background-color: #414141;
}
<div>
  <button class="dropdown-btn">
    <div>Client</div>
  </button>
  <div class="dropdown-container">
    <a href="client_properties/" style="height: 30px;"><span style="font-size: 24px;">+</span>Add new</a><br>
    <a href=''>first element</a><br>
    <a href=''>second element</a><br>
  </div>
  <div>
    <button class="dropdown-btn">
      <div>Car</div>
    </button>
    <div class="dropdown-container">
      <a href="client_properties/" style="height: 30px;"><span style="font-size: 24px;">+</span>Add new</a><br>
      <a href=''>first element</a><br>
      <a href=''>second element</a><br>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions