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>

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

ADyson
– ADyson

2020-05-12 17:45:00 +00:00
Commented May 12, 2020 at 17:45 — ADyson
– ADyson, Commented May 12, 2020 at 17:45

lakshitha madushan · Accepted Answer · 2020-05-12 17:49:55Z

<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

Bilal Ahmed · Accepted Answer · 2020-05-12 17:44:49Z

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>

Nice, although since it's quite a bit more sophisticated than the OP's code, it'll probably benefit them a lot if you explain it to them, it may not be obvious how it works to someone unfamiliar with it and/or inexperienced with JavaScript

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related