CODEWITHSUNDEEP
javascripthtmlcssdrop-down-menudropdown
Nicola_2101
Nicola_2101

Reputation: 13

how to reveal dropdown menu with button click using js?

Dropdown menu visible | Dropdown menu not visible. I've made a simple dropdown menu and i was wondering how you could hide and reveal it if you click the arrow. i thought maybe if you set the dropdown to display none and when you click the arrow (the icon is from font awsome) it changes to display block so it reveals itself. and when you click it again it hide itself again. I tried something with JS but that didnt work out.

here is my html:

    <div class="container">
        <div class="row categoriën-onder">
            <div class="col-3 categoriën">
                <ul>
                    <li>
                        <a class="categoriën-link "href="#"> 
                            categoriën
                            <i id="dropdown-icon" class="fas fa-chevron-down"></i>
                        </a>
                        <ul class="dropdown">
                            <li> <a href="wandlampen.html"> Wandlampen</a> </li>
                            <li> <a href="hanglampen.html"> Hanglampen</a> </li>
                            <li> <a href="tafellampen.html"> Tafellampen</a> </li>
                            <li> <a href="vloerlampen.html"> Vloerlampen</a> </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>

Upvotes: 1

Views: 1732

Answers (2)

Ismail Vittal
Ismail Vittal

Reputation: 1103

Make use of class to reveal the dropdown so that you can own the control on every element from CSS including icon rotation.

Also I slightly modified the HTML in order to support multiple dropdown items.

Fiddle: https://jsfiddle.net/kb0te5u4/

document.querySelectorAll(".dropdown-icon").forEach(function(dropdown) {
  dropdown.addEventListener("click", function(e) {
    e.target.closest('li').classList.toggle('toggle');
  });
});
ul li.toggle .dropdown {
  display: none;
}

ul li.toggle .dropdown-icon {
  transform: rotate(180deg)
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="container">
  <div class="row categoriën-onder">
    <div class="col-3 categoriën">
      <ul>
        <li>
          <a class="categoriën-link " href="#">
            categoriën
            <i class="dropdown-icon fas fa-chevron-down"></i>
          </a>
          <ul class="dropdown">
            <li> <a href="wandlampen.html"> Wandlampen</a> </li>
            <li> <a href="hanglampen.html"> Hanglampen</a> </li>
            <li> <a href="tafellampen.html"> Tafellampen</a> </li>
            <li> <a href="vloerlampen.html"> Vloerlampen</a> </li>
          </ul>
        </li>

        <li>
          <a class="categoriën-link " href="#">
            categoriën 1
            <i class="dropdown-icon fas fa-chevron-down"></i>
          </a>
          <ul class="dropdown">
            <li> <a href="wandlampen.html"> Wandlampen</a> </li>
            <li> <a href="hanglampen.html"> Hanglampen</a> </li>
            <li> <a href="tafellampen.html"> Tafellampen</a> </li>
            <li> <a href="vloerlampen.html"> Vloerlampen</a> </li>
          </ul>
        </li>

      </ul>
    </div>
  </div>
</div>

Upvotes: 0

Mike
Mike

Reputation: 96

You are spot on with your description on how to do this.

1) add an event listener to the dropdown icon that listens for the click.

2) the listener should call a function the uses JS to get the menu.

3) toggle the visibility based on the element style.display

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

</head>
<body>
  <div class="container">
    <div class="row categoriën-onder">
        <div class="col-3 categoriën">
            <ul>
                <li>
                    <a class="categoriën-link "href="#">
                        categoriën
                        <i id="dropdown-icon" class="fas fa-chevron-down"></i>
                    </a>
                    <ul class="dropdown">
                        <li> <a href="wandlampen.html"> Wandlampen</a> </li>
                        <li> <a href="hanglampen.html"> Hanglampen</a> </li>
                        <li> <a href="tafellampen.html"> Tafellampen</a> </li>
                        <li> <a href="vloerlampen.html"> Vloerlampen</a> </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
  </div>

  <script>
      function toggleDropdown() {
        const menu = document.querySelector(".dropdown");
        if (menu.style.display === "none") {
          menu.style.display = "block";
        } else {
          menu.style.display = "none";
        }

      }
      document.getElementById("dropdown-icon").addEventListener("click", toggleDropdown);
  </script>
</body>
</html>

Upvotes: 1

Related Questions