CODEWITHSUNDEEP
javascriptdrop-down-menu
Bipin
Bipin

Reputation: 99

How to make single function for multiple dropdowns with same class to work?

When one dropdown button is clicked, show class is applied to all the dropdown contents despite applying it just to a child dropdown content.

Using different class name for different dropdown seems to work but that way the code becomes immense.

//Working JS (But using multiple classnames) 
const homeBtn = document.querySelector(".home-btn");
const aboutBtn = document.querySelector(".about-btn");
const homeContent = document.querySelectorAll(".home-content");
const aboutContent = document.querySelectorAll(".about-content");
let showDropdown = false;
homeBtn.addEventListener("click", toggleHome);
aboutBtn.addEventListener("click", toggleAbout);

function toggleHome() {
    if (!showDropdown) {
        homeContent.forEach(item => item.classList.add("show"));
        showDropdown = true;
    } else {
        homeContent.forEach(item => item.classList.remove("show"));
        showDropdown = false;
    }
}

function toggleAbout() {
    if (!showDropdown) {
        aboutContent.forEach(item => item.classList.add("show"));
        showDropdown = true;
    } else {
        aboutContent.forEach(item => item.classList.remove("show"));
        showDropdown = false;
    }
}
.sideitem {
  background: orange;
  padding: 10px 0 0 10px;
  border-bottom: 1px solid #fff;
}
.dropdown-btn {
  padding: 5px;
  cursor: pointer;
}
.dropdown-content {
  display: none;
}
.dropdown-content.show {
  display: block;
}


.dropdown-content a {
  display: block;
  color: #fff;
  padding: 5px;
  border-bottom: 1px solid #fff;
  margin-left: 20px;
}

.dropdown-content a:hover {
  background: #fa0;
  color: #00f;
}
<ul class="sidelist">
    <li class="sideitem">
      <div class="dropdown-btn home-btn"> Home<i class="fas fa-caret-down"></i></div>
          <div class="dropdown-content home-content">
              <a href="#slider">Slider</a>
              <a href="#testimonal">Testimonal</a>
          </div>
    </li>
    <li class="sideitem">
        <div class="dropdown-btn about-btn"> About<i class="fas fa-caret- 
        down"></i></div>
            <div class="dropdown-content about-content">
                <a href="#slider">About Us</a>
                <a href="#testimonal">Our Team</a>
        </div>
    </li>
</ul>

Is there any simple way to solve this issue despite using the large code?

Upvotes: 0

Views: 1463

Answers (1)

some
some

Reputation: 49602

// Get all drop-down buttons
const dropDownButtons = document.querySelectorAll(".dropdown-btn");
// Get all drop down content elements.
const dropDownContent = document.querySelectorAll(".dropdown-content");


function handleClick(event) {
  const main = event.target; // Use the event.target, the clicked element
  const className = "show"; // Spcecify the class name one time
  let myContent = null; // The drop down contents of the clicked item, if found
  dropDownContent.forEach( elem => {
    // Kludge: using parentNode since the clicked element is in it's own div.
    // It would probably be better if the querySelector above selected
    // the li-element, and then remove paretNode from the next statement.
    if ( main.parentNode.contains(elem)) {
      myContent = elem;
    } else {
      // Remove the class from every content except the clicked one.
      elem.classList.remove(className);
    }
  });
  // If the clicked have content, troggle if it is shown or not.
  if (myContent) myContent.classList.toggle(className);
}

dropDownButtons.forEach( elem => elem.addEventListener("click",  handleClick));
.sideitem {
  background: orange;
  padding: 10px 0 0 10px;
  border-bottom: 1px solid #fff;
}
.dropdown-btn {
  padding: 5px;
  cursor: pointer;
}
.dropdown-content {
  display: none;
}
.dropdown-content.show {
  display: block;
}


.dropdown-content a {
  display: block;
  color: #fff;
  padding: 5px;
  border-bottom: 1px solid #fff;
  margin-left: 20px;
}

.dropdown-content a:hover {
  background: #fa0;
  color: #00f;
}
<ul class="sidelist">
    <li class="sideitem">
      <div class="dropdown-btn home-btn"> Home<i class="fas fa-caret-down"></i></div>
          <div class="dropdown-content home-content">
              <a href="#slider">Slider</a>
              <a href="#testimonal">Testimonal</a>
          </div>
    </li>
    <li class="sideitem">
        <div class="dropdown-btn about-btn"> About<i class="fas fa-caret- 
        down"></i></div>
            <div class="dropdown-content about-content">
                <a href="#slider">About Us</a>
                <a href="#testimonal">Our Team</a>
        </div>
    </li>
</ul>

Upvotes: 1

Related Questions