How do I make a clickable dropdown button with javascript and css?

Question

I am trying to make a clickable button. In the code down below you can see five buttons. The one I am programming with now is the first one (The one with the "Dropdown1" ID). In the bottom you can see the JavaScript code I use. I don't understand why this doesn't work. For my CSS codes I have created separate files. When I test this on the website, nothing happens when I click the first button. The text that is supposed to show/hide doesn't show/hide.

      <div class="ompanama" id="femsteder" class="dropdownmain">
        <h1 id="liste-overskrift">5 fine steder i Panama</h1>
        <ul id="liste">
          <button onclick="Function1" class="dropbtn"><li>San Blas-øyene</li></button><br>
          <div id="Dropdown1" class="dropdownContent">
            <p>gfghkdfghjkjfdhgkfdhgdkfugh</p>
          </div>

          <button onclick="Function2" class="dropbtn"><li>Panama City</li></button><br>
          <div id="Dropdown2" class="dropdownContent">
            <p>gfghkdfghjkjfdhgkfdhgdkfugh</p>
          </div>

          <button onclick="Function3" class="dropbtn"><li>Gatúnsjøen</li></button><br>
          <div id="Dropdown3" class="dropdownContent">
            <p>gfghkdfghjkjfdhgkfdhgdkfugh</p>
          </div>

          <button onclick="Function4" class="dropbtn"><li>Chagres Nasonalpark</li></button><br>
          <div id="Dropdown4" class="dropdownContent">
            <p>gfghkdfghjkjfdhgkfdhgdkfugh</p>
          </div>

          <button onclick="Function5" class="dropbtn"><li>Darién Nasjonalpark</li></button><br>
          <div id="Dropdown5" class="dropdownContent">
            <p>gfghkdfghjkjfdhgkfdhgdkfugh</p>
          </div>
        </ul>

      </div>

      <script type="text/javascript">

        function Function1() {
    var x = document.getElementById("Dropdown1");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
    }


      </script>

      </body>

Answer 1

Here is a example to achieve you requirement

 /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // Close the dropdown menu if the user clicks outside of it window.onclick = function(event) { if (.event.target.matches('.dropbtn')) { var dropdowns = document;getElementsByClassName("dropdown-content"); var i; for (i = 0. i < dropdowns;length; i++) { var openDropdown = dropdowns[i]. if (openDropdown.classList.contains('show')) { openDropdown.classList;remove('show'); } } } }

 /* Dropdown Button */.dropbtn { background-color: #3498DB; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } /* Dropdown button on hover & focus */.dropbtn:hover, .dropbtn:focus { background-color: #2980B9; } /* The container <div> - needed to position the dropdown content */.dropdown { position: relative; display: inline-block; } /* Dropdown Content (Hidden by Default) */.dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Links inside the dropdown */.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* Change color of dropdown links on hover */.dropdown-content a:hover {background-color: #ddd} /* Show the dropdown menu (use JS to add this class to the.dropdown-content container when the user clicks on the dropdown button) */.show {display:block;}

 <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Dropdown</button> <div id="myDropdown" class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div>

Answer 2

 <div class="ompanama dropdownmain" id="femsteder"> <h1 id="liste-overskrift">5 fine steder i Panama</h1> <ul id="liste"> <button onclick="Function1()" class="dropbtn"> <li>San Blas-øyene</li> </button> <br> <div id="Dropdown1" class="dropdownContent"> <p>gfghkdfghjkjfdhgkfdhgdkfugh</p> </div> <button onclick="Function2()" class="dropbtn"> <li>Panama City</li> </button> <br> <div id="Dropdown2" class="dropdownContent"> <p>gfghkdfghjkjfdhgkfdhgdkfugh</p> </div> <button onclick="Function3()" class="dropbtn"> <li>Gatúnsjøen</li> </button> <br> <div id="Dropdown3" class="dropdownContent"> <p>gfghkdfghjkjfdhgkfdhgdkfugh</p> </div> <button onclick="Function4()" class="dropbtn"> <li>Chagres Nasonalpark</li> </button> <br> <div id="Dropdown4" class="dropdownContent"> <p>gfghkdfghjkjfdhgkfdhgdkfugh</p> </div> <button onclick="Function5()" class="dropbtn"> <li>Darién Nasjonalpark</li> </button> <br> <div id="Dropdown5" class="dropdownContent"> <p>gfghkdfghjkjfdhgkfdhgdkfugh</p> </div> </ul> </div> <script type="text/javascript"> function Function1() { var x = document.getElementById("Dropdown1"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } </script>

onclick=" Function1 " should be onclick=" Function1() "

You need to add parentheses