CODEWITHSUNDEEP
javascripthtmlcss
Dave
Dave

Reputation: 1277

open/close sidenav bar same button

I have a button that I'm hoping will open and close a side nav. My button code is:

<button class="myBtn" id="myBtn"><i class="glyphicon glyphicon-info-sign"></i></button>

I'm trying to use addEventListener and think i may be missing an if statement in this, but can't be sure:

document.getElementById("myBtn").addEventListener("click", open);
    function open() {
        document.getElementById("mySidenav").style.width = "250px";
        document.getElementById("main").style.marginLeft = "250px";
        document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
document.getElementById("myBtn").addEventListener("click", close);
    function close() {
         document.getElementById("mySidenav").style.width = "0";
        document.getElementById("main").style.marginLeft = "0";
        document.body.style.backgroundColor = "white";
}

any suggestions? thanks!

Upvotes: 0

Views: 16952

Answers (6)

Sanguinary
Sanguinary

Reputation: 354

Easiest and most simplific solution would be to toggle the onclick="function()" on your button. This is not using addEventListener though.

Add these two lines to your two open and close functions:

document.getElementById("myBtn").onclick = close;

document.getElementById("myBtn").onclick = open;

Your complete code would then look like this.

function open() {
    document.getElementById("myBtn").onclick = close;
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
    document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function close() {
    document.getElementById("myBtn").onclick = open;
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
    document.body.style.backgroundColor = "white";
}

Upvotes: 0

Caesar Grubel
Caesar Grubel

Reputation: 1

If you are willing to forget about the EventListener, here is my contribution:

For you side navigation menu, use:

<nav id='rightMenu' style='display:none;'>
  <a href='#' onclick='toggleRightMenu()'>Link 1</a>
  <a href='#' onclick='toggleRightMenu()'>Link 1</a>
  <a href='#' onclick='toggleRightMenu()'>Link 1</a>
</nav>

For the button to open (show) and close (hide) the navigation menu, use:

<button onclick='toggleRightMenu()'></button>

And for the toogleRightMenu() code, use:

<script>
  function toggleRightMenu() {
    navMenuStatus = document.getElementById('rightMenu').style.display;
    if ( navMenuStatus == 'none' ) {
      document.getElementById('rightMenu').style.display = 'block';
    } else {
      document.getElementById('rightMenu').style.display = 'none';
    }
  }
</script>

Upvotes: 0

DIEGO CARRASCAL
DIEGO CARRASCAL

Reputation: 2129

This is what I meant in my comment...

document.getElementById("myBtn").addEventListener("click", open_close);

var menuState = 0 // close
function open_close() {
  if(menuState === 0){
     menuState = 1;
     document.getElementById("mySidenav").style.width = "250px";
     //document.getElementById("main").style.marginLeft = "250px";
     document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
  }
  else {
     menuState = 0;
     document.getElementById("mySidenav").style.width = "0";
     //document.getElementById("main").style.marginLeft = "0";
     document.body.style.backgroundColor = "white";
  }
  console.log(menuState);
}

here is the fiddle

Upvotes: 1

Asifuzzaman
Asifuzzaman

Reputation: 1783

hello This might help you see the below fiddle ****ignore the code**** 

 <script>
 var o =document.getElementById("one");
 var to =document.getElementById("two");
 to.style.display = 'none';
 function openNav() {
 document.getElementById("mySidenav").style.width = "150px";
 document.getElementById("main").style.marginLeft = "150px";
 o.style.display = 'none';
 to.style.display = '';
 }
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
o.style.display = '';
to.style.display = 'none'; 
}
</script>

sidebar fiddle one button

Upvotes: 0

Paulo Martins
Paulo Martins

Reputation: 167

You can create a toogleFunction

document.getElementById("myBtn").addEventListener("click", toggleNav);

function toggleNav(){
    navSize = document.getElementById("mySidenav").style.width;
    if (navSize == 250) {
        return close();
    }
    return open();
}
function open() {
        document.getElementById("mySidenav").style.width = "250px";
        document.getElementById("main").style.marginLeft = "250px";
        document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function close() {
         document.getElementById("mySidenav").style.width = "0";
        document.getElementById("main").style.marginLeft = "0";
        document.body.style.backgroundColor = "white";
}

Upvotes: 0

Husain Ahmmed
Husain Ahmmed

Reputation: 351

This is may not a best solution but I try to show a quick solution. That is how I did

	document.getElementById("myBtn").addEventListener("click", open);
    function open() {
	        document.getElementById("mySidenav").style.width = "250px";
	        document.getElementById("mySidenav").style.height = "500px";
	        document.getElementById("mySidenav").style.backgroundColor = "#ddff11";
	        // document.getElementById("main").style.marginLeft = "250px";
	        document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
	}
	document.getElementById("myBtnTwo").addEventListener("click", close);
	    function close() {
	         document.getElementById("mySidenav").style.width = "0";
	        document.getElementById("main").style.marginLeft = "0";
	        document.body.style.backgroundColor = "white";
	}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		
	</style>
</head>
<body>		

<div id="main">
	<div id="mySidenav">
		
	</div>
</div>

<button class="myBtn" id="myBtn"><i class="glyphicon glyphicon-info-sign">Button Open</i></button> 
<button class="myBtn" id="myBtnTwo"><i class="glyphicon glyphicon-info-sign">Button Close</i></button> 



</body>
</html>

Upvotes: 0

Related Questions