CODEWITHSUNDEEP
javascripthtmlcsstogglebutton
Tara
Tara

Reputation: 25

Javascript dropdown menu toggle button

I am trying to get my option list to hide until the dropdown menu button has been clicked and for it to hide again once it has been clicked however, it is not working. Here is my code. Please let me know what i can do to fix it

My html :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width initial-scale=1">
        <title>Cocktail App</title>
        <link
        href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
      rel="stylesheet"/>
      <link rel="stylesheet" type="text/css" href="css/recipe.css">
      <script src="recipe.js"></script>
    </head>
    <body>
        <h2>YOUR ONE STOP SHOP FOR AMAZING COCKTAIL RECIPES!</h2>
        <div class="container">
            <button onclick="myFunction()" class="dropbtn"> Cocktails!!</button>
            <div id="myDropdown" class="search-container">
                <input type="text" placeholder="Choose cocktail..." id="myInput" onkeyup="filterFunction()">
                    <a href="#">Margarita</a>
                    <a href="#>Mojito</a>
                    <a href="#">Long Island tea</a>
                    <a href="#">Whiskey Sour</a>
            </div>
      </div>
      <div id="result"></div>
    </div>

    </body>
</html>

My javascript :


function myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
      }  
function filterFunction() {
        var input = document.getElementById("myInput");
        var filter = input.value.toUpperCase();
        var dropDown = document.getElementById("myDropdown");
        var link = dropDown.getElementsByTagName("a");
        for (i = 0; i < link.length; i++) {
          textValue = link[i].textContent || link[i].innerText;
          if (textValue.toUpperCase().indexOf(filter) > -1) {
            link[i].style.display = "";
          } else {
            link[i].style.display = "none";
          }
        }
}

Upvotes: 1

Views: 377

Answers (3)

Cooleronie
Cooleronie

Reputation: 1315

I can't see your css but your .show class needs to defined. Add the following to your stylesheet:

#myDropdown {
  display: none;
}

#myDropdown.show
{
  display: block;
}

Working:

function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); 
}  
function filterFunction() {
        var input = document.getElementById("myInput");
        var filter = input.value.toUpperCase();
        var dropDown = document.getElementById("myDropdown");
        var link = dropDown.getElementsByTagName("a");
        for (i = 0; i < link.length; i++) {
          textValue = link[i].textContent || link[i].innerText;
          if (textValue.toUpperCase().indexOf(filter) > -1) {
            link[i].style.display = "";
          } else {
            link[i].style.display = "none";
          }
        }
}
#myDropdown {
  display: none;
}

#myDropdown.show
{
  display: block;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width initial-scale=1">
    <title>Cocktail App</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" />
  </head>
  <body>
    <h2>YOUR ONE STOP SHOP FOR AMAZING COCKTAIL RECIPES!</h2>
    <div class="container">
      <button onclick="myFunction()" class="dropbtn"> Cocktails!!</button>
      <div id="myDropdown" class="search-container">
        <input type="text" placeholder="Choose cocktail..." id="myInput" onkeyup="filterFunction()">
        <a href="#">Margarita</a>
        <a href="#">Mojito</a>
        <a href="#">Long Island tea</a>
        <a href="#">Whiskey Sour</a>
      </div>
    </div>
    <div id="result"></div>
  </body>
</html>

Upvotes: 1

Bl4ckbird
Bl4ckbird

Reputation: 103

You'll need some CSS to define the class "show", for example add this inside your HTML <head>:

<style>
.hidden {
    display: none !important;
}
</style>

Notice that I changed the class name to "hidden" instead of "show" for semantics. This way, when an element has the class "hidden", it will not be displayed.

Now change your Javascript correspondingly, so it adds and removes the class "hidden":

document.getElementById("myDropdown").classList.toggle("hidden");

Upvotes: 2

Elanaris
Elanaris

Reputation: 56

First try to add the missing quotation mark after # in: <a href="#>Mojito</a> and see if it works then.

And remove the 'java' from tags since this is not java but javascript :)

Upvotes: 1

Related Questions