CODEWITHSUNDEEP
javascripthtmldropdown
desteen
desteen

Reputation: 307

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>

Upvotes: 4

Views: 140

Answers (4)

mellan malinis
mellan malinis

Reputation: 1

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>

Upvotes: -1

Pinke Helga
Pinke Helga

Reputation: 6682

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>

JavaScript Method

If you really want to do it in JavaScript, you should use the modern way adding event-listeners instead of the onclick attribute.

Instead of string manipulation use the classList.toggle() method.

You do not need id attributes at all:

document.addEventListener('DOMContentLoaded', () =>
  document.querySelectorAll('.sidenav > button').forEach(el =>
    el.addEventListener('click', ev =>
      ev.target.nextElementSibling.classList.toggle('w3-hide')
)));
<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> Dropdown I </button>
  <div 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> Dropdown II </button>
  <div 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> Dropdown III </button>
  <div 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>

Upvotes: 0

asiby
asiby

Reputation: 3389

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>

Upvotes: 0

caiovisk
caiovisk

Reputation: 3809

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>

Upvotes: 5

Related Questions