The First Dropdown Is Always Being Open

close open dropdown when clicking to open another
open one dropdown at a time
how to keep drop down menu open when opening a new page
how to keep drop down menu open in html
drop down menu open downward
dropdown always open
drop down menu open upward
how to make a dropdown stay 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>

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>

Only allowing one open dropdown at a time with the details element , There's a good chance that when one dropdown opens, you want any open dropdowns to close so that they don't overlap with each other. i been looking for one before but the best i found was msdropdown for the icons etc also i been looking for a way to force a dropdown to open down but i could only find that it would be impossible to force cause it's the browser doing this and not the code, anyway if i would have a way to just check if the dropdownlist goes up or down i can recalculate the place and it's done :) also browser

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>

Set dropdown initial state to open - Custom code, Hi, I'm trying to have the initial state of a dropdown set to open. that created a problem where a user would be required to click twice on the dropdown to close it the first time around. How to do dropdown always open? A common UI pattern that we see on the web are dropdown menus. They’re used to display related information in pieces, without overwhelming the user with buttons, text, and options. Somewhere that we see these a lot is inside of headers or navigation areas on websites. Let’s see if we can make one of these menus with CSS alone.

I have adjusted your snippet to pass the ID of the element to the function.

<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('demoAcc1')" href="javascript:void(0)" id="myBtn"> Dropdown I 
        </button>
        <div id="demoAcc1" 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('demoAcc2')" href="javascript:void(0)" id="myBtn"> Dropdown II 
        </button>
        <div id="demoAcc2" 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('demoAcc3')" href="javascript:void(0)" id="myBtn"> Dropdown III 
        </button>
        <div id="demoAcc3" 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(id) {
        var x = document.getElementById(id);
        if (x.className.indexOf("w3-show") == -1) {
          x.className += " w3-show";
        } else {
          x.className = x.className.replace(" w3-show", "");
        }
      }
      </script>

      </body>
    </html>

How to do dropdown always open?, Help please, i need to do the first service always open, and when i'm user would be required to click twice on the dropdown to close it the first� I not keep down menus open long enough to select favorites, get to options or to print etc. The menu and the favorites open but won't let me scroll down to select. They close before I click on anything. In Favorites I have various folder but can not get them to click on the site I want because the drop down disappears.

Pure CSS

This can be done with pure CSS.

In this example there are <button> elements just to have the browser's default style of a button. To let the checkboxes receive the mouse-clicks we turn off them on the buttons with pointer-events:none. You could style the <label> tags to look like buttons as well, so you do not need buttons at all.

The trick is to define the display CSS property of the next sibling of the checkboxes dependend on the checked-state.

.sidenav>label>button {
  pointer-events: none;
}

.sidenav>input[type="checkbox"],
.sidenav>input[type="checkbox"]+div {
  display: none;
}

.sidenav>input[type="checkbox"]:checked+div {
  display: block;
}
<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>
  <label for="myBtn-1"><button> Dropdown I </button></label>
  <input type="checkbox" id="myBtn-1">
  <div id="demoAcc-1" class="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>

  <label for="myBtn-2"><button> Dropdown II </button></label>
  <input type="checkbox" id="myBtn-2">
  <div id="demoAcc-2" class="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>

  <label for="myBtn-3"><button> Dropdown III </button></label>
  <input type="checkbox" id="myBtn-3">
  <div id="demoAcc-3" class="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>

Line-by-line: advanced CSS tricks for click-to-open drop-down lists , CSS will expect three children: first the top part (content to always show), then As a bonus, you'll be able to make a drop-down list that is not a� The positioning of the drop-down list is fully automatic: we will always try to place the dropdown list in a way that the user can select an item in the list. Basic example ¶ A button with a dropdown list of 10 possible values.

Opening a Select in a Dropdown closes the Dropdown, a SELECT component within a DROPDOWN menu, I would expect to be able to When the DROPDOWN is opened again the SELECT's option list is still open. dropdown is prepared mostly for links inside, thats why it will always close� Dropdown field. Dropdown field with editor open. Dropdown field on collapsed block. Creation. The dropdown constructor takes in a menu generator and an optional validator. The menu generator has lots of flexibility, but it is essentially an array of options, each option containing a human-readable part, and a language-neutral string. Simple

prevent dropdown first item highlight after open � Issue #716 , So, is it posible to prevent highlight first dropdown item after open? I think such behavior would be useful in dropdown-select component. Highlighting is part of the focusing (first item in dropdown is always focused for� "move drop down to base of to stop it from being cut off (drop.js) #591" cmlenz mentioned this issue Mar 5, 2015 Render dropdown above the input if there is not room below #719

So You Need To Fill a Dropdown Dynamically, For our example, the markup will always be the same, just two simple select elements. The first one has three options. The first just informs the user to select an� Your implementation always skip the first result of the query. I believe that your tried your code against a query that returns only a single result so you don't see any elements in the dropdown. You should remove the first line of code when you call dataReader.Read();

Comments
  • HTML id attributes must contain unique values.
  • document.getElementById("elemId"); You want to use the function parameter document.getElementById(elemId); instead of a string literal.
  • Why do you try it this way? There are <select><option> dropdowns builtin in the browsers and your scripted look'n'feel can be implemented using pure CSS.
  • That really helps! Thank you!! @Quasimodo'sclone
  • I edited my codes and applied your answer but I got an error. Please refer to my post above so you can see. Thanks.