How to hide already opened panel when click on other button?

Question

  <html>
<head><title></title></head>

<body>
  <div id="mySidenav1" class="sidenavlogin">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav1()">&times;</a>
  <a href="#">Government Departments</a>
  <a href="#">Service Agencies</a>
  <a href="#">Citizen</a>

</div>
<span class="login" onclick="openNav1()"> Login</span>

<!--api-->
<div id="mySidenav2" class="sidenavapi">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav2()">&times;</a>
  <a href="#">eKYB APK</a>
  <a href="#">eKYB API</a>

</div>
<span class="api" onclick="openNav2()"> API</span>
<script>
function openNav1() {
    document.getElementById("mySidenav1").style.width = "250px";
  }

function closeNav1() {
    document.getElementById("mySidenav1").style.width = "0";
   }
function openNav2() {
    document.getElementById("mySidenav2").style.width = "200px";
 }

function closeNav2() {
    document.getElementById("mySidenav2").style.width = "0";
 }
</body>
</html>

in the above code when api panel is opened and when click on the login api panel should close. here i am posting the code please go through this an suggest.

Answer 1

使用style.display =“ none”而不是指定宽度

Answer 2

You want to use element.style.display instead of width

element.style.display = 'block'; to show
element.style.display = 'none'; to hide

 <html> <body> <div id="mySidenav1" class="sidenavlogin"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav1()">&times;</a> <a href="#">Government Departments</a> <a href="#">Service Agencies</a> <a href="#">Citizen</a> </div> <a href="javascript:void(0)" class="closebtn" onclick="openNav1()">+</a> <span class="login" onclick="openNav1()"> Login</span> <!--api--> <div id="mySidenav2" class="sidenavapi"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav2()">&times;</a> <a href="#">eKYB APK</a> <a href="#">eKYB API</a> </div> <a href="javascript:void(0)" class="closebtn" onclick="openNav2()">+</a> <span class="api" onclick="openNav2()"> API</span> <script> function openNav1() { document.getElementById("mySidenav1").style.display = "block"; } function closeNav1() { document.getElementById("mySidenav1").style.display = "none"; } function openNav2() { document.getElementById("mySidenav2").style.display = "block"; } function closeNav2() { document.getElementById("mySidenav2").style.display = "none"; } </script> </body> </html>

Answer 3

Here is the updated code. When you click on login, API panel closes. and when you click on API, login panel closes.

 function openNav1() { document.getElementById("mySidenav2").style.display = "none"; document.getElementById("mySidenav1").style.display = "block"; } function closeNav1() { document.getElementById("mySidenav1").style.display = "none"; } function openNav2() { document.getElementById("mySidenav1").style.display = "none"; document.getElementById("mySidenav2").style.display = "block"; } function closeNav2() { document.getElementById("mySidenav2").style.display = "none"; }

 .sidenavlogin, .sidenavapi { display: none; }

 <div id="mySidenav1" class="sidenavlogin"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav1()">&times;</a> <a href="#">Government Departments</a> <a href="#">Service Agencies</a> <a href="#">Citizen</a> </div> <a href="javascript:void(0)" class="closebtn" onclick="openNav1()">+</a> <span class="login" onclick="openNav1()"> Login</span> <!--api--> <div id="mySidenav2" class="sidenavapi"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav2()">&times;</a> <a href="#">eKYB APK</a> <a href="#">eKYB API</a> </div> <a href="javascript:void(0)" class="closebtn" onclick="openNav2()">+</a> <span class="api" onclick="openNav2()"> API</span>

Answer 4

use common class for nav blocks.

Like sideNav and style attributes instead of setting width .

function closeAll(){  
    var divsToHide = document.getElementsByClassName("sideNav");  
    for(var i = 0; i < divsToHide.length; i++) {  
    divsToHide[i].style.display = "none";  
     //     divsToHide[i].style.width = "0"; // if purpose fully you want to use width then use this  
    }  
}  

function openNav1() {  
    closeAll();   
    document.getElementById("mySidenav1").style.display = "block";  
}

How to hide already opened panel when click on other button?

Question

4 answers

solution1
0 2017-11-23 06:17:39

solution2
0 2017-11-23 06:29:50

solution3
0 2017-11-23 06:59:44

solution4
0 2017-11-23 07:10:07

How to hide already opened panel when click on other button?

Question

4 answers

solution1 0 2017-11-23 06:17:39

solution2 0 2017-11-23 06:29:50

solution3 0 2017-11-23 06:59:44

solution4 0 2017-11-23 07:10:07

solution1
0 2017-11-23 06:17:39

solution2
0 2017-11-23 06:29:50

solution3
0 2017-11-23 06:59:44

solution4
0 2017-11-23 07:10:07