Search code examples
javascripthtmldropdown

The First Dropdown Is Always Being Open

I am trying to have multiple dropdowns on my website. The problem is whenever I clicked the second dropdown the first dropdown was being opened. I got the codes from w3school and I honestly don't get it but it works so it was fine with me until this happens,

Below are my codes.

<html>
<title> Dropdown </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="images/icons/favicon.ico" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

<body>
  <div class="sidenav">
    <h3> DROPDOWNS </h3> <br>
    <button onclick="myAccFunc('demoAcc')" href="javascript:void(0)" id="myBtn"> Dropdown I 
                </button>
    <div id="demoAcc" class="w3-hide w3-padding-large w3-medium">
      <button class="w3-bar-item w3-button">A</button>
      <button class="w3-bar-item w3-button">B</button>
      <button class="w3-bar-item w3-button">C</button>
      <button class="w3-bar-item w3-button">D</button>
    </div><br>

    <button onclick="myAccFunc('demoAcc-2')" href="javascript:void(0)" id="myBtn"> Dropdown II 
                </button>
    <div id="demoAcc-2" class="w3-hide w3-padding-large w3-medium">
      <button class="w3-bar-item w3-button">1</button>
      <button class="w3-bar-item w3-button">2</button>
      <button class="w3-bar-item w3-button">3</button>
      <button class="w3-bar-item w3-button">4</button>
    </div><br>

    <button onclick="myAccFunc('demoAcc-3')" href="javascript:void(0)" id="myBtn"> Dropdown III 
                </button>
    <div id="demoAcc-3" class="w3-hide w3-padding-large w3-medium">
      <button class="w3-bar-item w3-button">+</button>
      <button class="w3-bar-item w3-button">-</button>
      <button class="w3-bar-item w3-button">/</button>
      <button class="w3-bar-item w3-button">=</button>
    </div>
  </div>

  <script>
    function myAccFunc(elemId) {
      var x = document.getElementById(elemId);
      if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
      } else {
        x.className = x.className.replace(" w3-show", "");
      }
    }
  </script>

</body>

</html>

Solution

  • PROBLEM: Your function are opening the same property ID demoAcc for all

    SOLUTION: you will need to specify unique ID's for each different element, like: 

    <div id="demoAcc" class="w3-hide w3-padding-large w3-medium">...</div>
<div id="demoAcc-2" class="w3-hide w3-padding-large w3-medium">...</div>
<div id="demoAcc-3" class="w3-hide w3-padding-large w3-medium">...</div>

    Then you need to update your function to receive a value:

    function myAccFunc( elemId ) {
            var x = document.getElementById( elemId );
...
}

    Then on each button you will define the div ID you wish to open, like:

    <button onclick="myAccFunc('demoAcc')" ... > Dropdown I </button>
<button onclick="myAccFunc('demoAcc-2')" ... > Dropdown II </button>
<button onclick="myAccFunc('demoAcc-3')" ... > Dropdown III </button>

    See snippet:

    function myAccFunc( elemId ) {
            var x = document.getElementById( elemId );
            if (x.className.indexOf("w3-show") == -1) {
              x.className += " w3-show";
            } else {
              x.className = x.className.replace(" w3-show", "");
            }
          }
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
          
            <div class="sidenav">
        	  <h3> DROPDOWNS </h3> <br>
            <button onclick="myAccFunc('demoAcc')" href="javascript:void(0)" id="myBtn"> Dropdown I 
            </button>
            <div id="demoAcc" class="w3-hide w3-padding-large w3-medium">
              <button class="w3-bar-item w3-button">A</button>
              <button class="w3-bar-item w3-button">B</button>
              <button class="w3-bar-item w3-button">C</button>
              <button class="w3-bar-item w3-button">D</button>
            </div><br>
            
            <button onclick="myAccFunc('demoAcc-2')" href="javascript:void(0)" id="myBtn-2"> Dropdown II 
            </button>
            <div id="demoAcc-2" class="w3-hide w3-padding-large w3-medium">
              <button class="w3-bar-item w3-button">1</button>
              <button class="w3-bar-item w3-button">2</button>
              <button class="w3-bar-item w3-button">3</button>
              <button class="w3-bar-item w3-button">4</button>
            </div><br>
            
            <button onclick="myAccFunc('demoAcc-3')" href="javascript:void(0)" id="myBtn-3"> Dropdown III 
            </button>
            <div id="demoAcc-3" class="w3-hide w3-padding-large w3-medium">
              <button class="w3-bar-item w3-button">+</button>
              <button class="w3-bar-item w3-button">-</button>
              <button class="w3-bar-item w3-button">/</button>
              <button class="w3-bar-item w3-button">=</button>
            </div>
        	</div>