Close other div when new is clicked

Question

So I have this table with a menu dropdown, but I'm having trouble getting the divs close when I click on one of the other menu dropdown divs. This is because the JS looks for a click inside/outside of the class, but how can I change this?

I'm trying to avoid the user from opening multiple dropdown menus at the same time, like this:

Here is the working code to see the problem.

 /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function wdc_jql_menu(menu_id) { document.getElementById(menu_id).classList.toggle("show"); } // Close the dropdown 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'); } } } }

 .wdc_jql_table{ /* table width */ border:1; width: 100%; border-spacing: 0; border-collapse: collapse; background-color: #2F2F35; table-layout:fixed; // Cells is fixed to the percentage the cells is assigned too word-wrap:break-word; color: white; } .wdc_jql_table thead, tr{ /* table style - bottom borders to seperate rows */ border-bottom: 1.5px solid #3A3B41; } .wdc_jql_table tr:last-child{ /* table style - no border at last row */ border-bottom: none; } .wdc_jql_table th:nth-child(1), th:nth-child(2), th:nth-child(3), th:nth-child(4){ /* table child th align (project name, owner, jql) */ text-align: left; font-size: 24px; padding: 5px; } .wdc_jql_table td:nth-child(1), td:nth-child(2), td:nth-child(3){ /* table child td align (project name, owner, jql) */ text-align: left; font-size: 16px; padding: 5px; } .wdc_jql_table td:nth-child(4){ /* table child td align (...) */ text-align: center; font-size: 16px; padding-top: 5px; padding-bottom: 5px; padding-right: 15px; padding-left: 10px; } .wdc_jql_col1{ /* table col(project name) width */ width: 20%; } .wdc_jql_col2{ /* table col(owner) width */ width: 20%; } .wdc_jql_col3{ /* table col(jql) width */ width: 50%; } .wdc_jql_col4{ /* table col(...) width */ width: 10%; } /* MENU DESIGN */ .dropbtn { background-color: #2F2F35; color: white; font-size: 16px; border: none; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: #8D90A1; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown a:hover {background-color: #ddd;} .show {display: block;}

 <table id="others_jql" class="wdc_jql_table padding_jql_bottom"> <col class="wdc_jql_col1"> <col class="wdc_jql_col2"> <col class="wdc_jql_col3"> <col class="wdc_jql_col4"> <thead> <tr> <th>Project Name</th> <th>Owner</th> <th>JQL</th> <th></th> </tr> </thead> <tbody id="table_body_others"> <tr id="tr1"> <td name="projectNameTable">td1</td> <td name="employeeNo">td2</td> <td name="jqlTable">td3</td> <td name="edit_personal"><button onclick="wdc_jql_menu('menu_1')" class="dropbtn">&#8942;</button> <div id="menu_1" class="dropdown-content"> <a href="#Edit">Edit</a> <a href="#Remove">Remove</a> </div> </tr> <tr id="tr2"> <td name="projectNameTable">td11</td> <td name="employeeNo">td22</td> <td name="jqlTable">td33</td> <td name="edit_personal"><button onclick="wdc_jql_menu('menu_2')" class="dropbtn">&#8942;</button> <div id="menu_2" class="dropdown-content"> <a href="#Edit">Edit</a> <a href="#Remove">Remove</a> </div> </tr> <tr id="tr3"> <td name="projectNameTable">td11</td> <td name="employeeNo">td22</td> <td name="jqlTable">td33</td> <td name="edit_personal"><button onclick="wdc_jql_menu('menu_3')" class="dropbtn">&#8942;</button> <div id="menu_3" class="dropdown-content"> <a href="#Edit">Edit</a> <a href="#Remove">Remove</a> </div> </tr> </tbody> </table>

So the solution is to rewrite the JS to listen for the div ID and then close the other open/shown classes I guess, but how?

Answer 1

Thanks to the comment

Either find the element that currently has the class show and then remove that class, before you set it for the current one; or remember what element you added the class to the previous time, and then remove it from that. – CBroe

the solution was created here:

 /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function wdc_jql_menu(menu_id) { 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'); } } document.getElementById(menu_id).classList.toggle("show"); } // Close the dropdown 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'); } } } }

 .wdc_jql_table{ /* table width */ border:1; width: 100%; border-spacing: 0; border-collapse: collapse; background-color: #2F2F35; table-layout:fixed; // Cells is fixed to the percentage the cells is assigned too word-wrap:break-word; color: white; } .wdc_jql_table thead, tr{ /* table style - bottom borders to seperate rows */ border-bottom: 1.5px solid #3A3B41; } .wdc_jql_table tr:last-child{ /* table style - no border at last row */ border-bottom: none; } .wdc_jql_table th:nth-child(1), th:nth-child(2), th:nth-child(3), th:nth-child(4){ /* table child th align (project name, owner, jql) */ text-align: left; font-size: 24px; padding: 5px; } .wdc_jql_table td:nth-child(1), td:nth-child(2), td:nth-child(3){ /* table child td align (project name, owner, jql) */ text-align: left; font-size: 16px; padding: 5px; } .wdc_jql_table td:nth-child(4){ /* table child td align (...) */ text-align: center; font-size: 16px; padding-top: 5px; padding-bottom: 5px; padding-right: 15px; padding-left: 10px; } .wdc_jql_col1{ /* table col(project name) width */ width: 20%; } .wdc_jql_col2{ /* table col(owner) width */ width: 20%; } .wdc_jql_col3{ /* table col(jql) width */ width: 50%; } .wdc_jql_col4{ /* table col(...) width */ width: 10%; } /* MENU DESIGN */ .dropbtn { background-color: #2F2F35; color: white; font-size: 16px; border: none; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: #8D90A1; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown a:hover {background-color: #ddd;} .show {display: block;}

 <table id="others_jql" class="wdc_jql_table padding_jql_bottom"> <col class="wdc_jql_col1"> <col class="wdc_jql_col2"> <col class="wdc_jql_col3"> <col class="wdc_jql_col4"> <thead> <tr> <th>Project Name</th> <th>Owner</th> <th>JQL</th> <th></th> </tr> </thead> <tbody id="table_body_others"> <tr id="tr1"> <td name="projectNameTable">td1</td> <td name="employeeNo">td2</td> <td name="jqlTable">td3</td> <td name="edit_personal"><button onclick="wdc_jql_menu('menu_1')" class="dropbtn">&#8942;</button> <div id="menu_1" class="dropdown-content"> <a href="#Edit">Edit</a> <a href="#Remove">Remove</a> </div> </tr> <tr id="tr2"> <td name="projectNameTable">td11</td> <td name="employeeNo">td22</td> <td name="jqlTable">td33</td> <td name="edit_personal"><button onclick="wdc_jql_menu('menu_2')" class="dropbtn">&#8942;</button> <div id="menu_2" class="dropdown-content"> <a href="#Edit">Edit</a> <a href="#Remove">Remove</a> </div> </tr> <tr id="tr3"> <td name="projectNameTable">td11</td> <td name="employeeNo">td22</td> <td name="jqlTable">td33</td> <td name="edit_personal"><button onclick="wdc_jql_menu('menu_3')" class="dropbtn">&#8942;</button> <div id="menu_3" class="dropdown-content"> <a href="#Edit">Edit</a> <a href="#Remove">Remove</a> </div> </tr> </tbody> </table>

Answer 2

Hello just tried below code and worked,

   /* When the user clicks on the button, 
   toggle between hiding and showing the dropdown content */
   function wdc_jql_menu(menu_id) {
      clearDropdown();
      document.getElementById(menu_id).classList.toggle("show");
   }     

   // Close the dropdown if the user clicks outside of it
   window.onclick = function(event) {
      if (!event.target.matches('.dropbtn')) {
         clearDropdown();
      }
   }

   function clearDropdown() {
      const boxes = document.querySelectorAll('.dropdown-content');
      boxes.forEach(box => {
         box.classList.remove('show');
      });
   }