Close opened sublist before opening a new one and after clicking outside

user_14559207 0
Viewed 45

I want to click one parent element to toggle multiple elements. When I click first on a button it works as I expected. My problem is when I click on a second button my first button's list is not being removed.

I want to remove the toggle when I click my second or third button, and even when I click on body. How can I solve this problem? 

let rootClick = document.querySelector("body");
let popup = document.querySelector(".small-popup");

rootClick.addEventListener("click", (e) => {

  let target = e.target;

  if (target.className === "toggle") {

    target.nextElementSibling.classList.toggle("toggle-revert");

  }else if (target.className !== "toogle") {

      // target.nextElementSibling.classList.remove("toogle");
      // target.nextElementSibling.classList.add("remove");
      // popup.classList.remove("toogle");
      popup.classList.remove("remove");
      console.log("It's work but toggle not working");
      console.log(target)

  }
});
.feature {
  width: 70%;
  background-color: #f1f1f1;
  margin-bottom: 20px;
}
.small-popup {
  display: none;
  padding: 10px;
}
.toggle-revert {
  display: block;
}
.remove{
  display: none !important;
}
<div class="wrapper">
  <div class="feature">
    <button class="toggle">Button</button>
    <div class="small-popup">
      <ul>
        <li><a href="">Edit</a></li>
        <li><a href="">View details</a></li>
        <li><a href="">Edit history</a></li>
        <li><a href="">Copy link</a></li>
        <li><a href="">Delete</a></li>
      </ul>
    </div>
  </div>

  <div class="feature">
    <button class="toggle">Button</button>
    <div class="small-popup">
      <ul>
        <li><a href="">Edit</a></li>
        <li><a href="">View details</a></li>
        <li><a href="">Edit history</a></li>
        <li><a href="">Copy link</a></li>
        <li><a href="">Delete</a></li>
      </ul>
    </div>
  </div>

  <div class="feature">
    <button class="toggle">Button</button>
    <div class="small-popup">
      <ul>
        <li><a href="">Edit</a></li>
        <li><a href="">View details</a></li>
        <li><a href="">Edit history</a></li>
        <li><a href="">Copy link</a></li>
        <li><a href="">Delete</a></li>
      </ul>
    </div>
  </div>
</div>

css html javascript
1 Answers

You can do it as below. Notice I'm usingwindow instead of body, to make sure I cover the entire screen for tracking outside clicks.

window.addEventListener("click", (e) => {
  let target = e.target;
  let lastPopup = document.querySelector(".toggle-revert");
  if (target.className === "toggle") {
    target.nextElementSibling.classList.toggle("toggle-revert");
    if (lastPopup) {
      lastPopup.classList.remove("toggle-revert");
    }
  } else if (lastPopup && !lastPopup.contains(target)) {
    lastPopup.classList.remove("toggle-revert");
  }
});
.feature {
  width: 70%;
  background-color: #f1f1f1;
  margin-bottom: 20px;
}
.small-popup {
  display: none;
  padding: 10px;
}
.toggle-revert {
  display: block;
}
.remove {
  display: none !important;
}
<div class="wrapper">
  <div class="feature">
    <button class="toggle">Button</button>
    <div class="small-popup">
      <ul>
        <li><a href="">Edit</a></li>
        <li><a href="">View details</a></li>
        <li><a href="">Edit history</a></li>
        <li><a href="">Copy link</a></li>
        <li><a href="">Delete</a></li>
      </ul>
    </div>
  </div>

  <div class="feature">
    <button class="toggle">Button</button>
    <div class="small-popup">
      <ul>
        <li><a href="">Edit</a></li>
        <li><a href="">View details</a></li>
        <li><a href="">Edit history</a></li>
        <li><a href="">Copy link</a></li>
        <li><a href="">Delete</a></li>
      </ul>
    </div>
  </div>

  <div class="feature">
    <button class="toggle">Button</button>
    <div class="small-popup">
      <ul>
        <li><a href="">Edit</a></li>
        <li><a href="">View details</a></li>
        <li><a href="">Edit history</a></li>
        <li><a href="">Copy link</a></li>
        <li><a href="">Delete</a></li>
      </ul>
    </div>
  </div>
</div>

user_152886410
Related