Whenever I try to open or close my navigation bar, I have to use two separate JavaScript functions: openNav() to open and closeNav() to close.
openNav() - open
closeNav() - close
The code for the navigation bar functionality is sourced from W3-schools at http://www.w3schools.com/howto/howto_js_sidenav.asp.
I am looking for an easy way to toggle between opening and closing the navigation bar with the same button. Should I change the onclick="" value each time the button is pressed, or should I use two buttons that hide each other when one is pressed?
Here is the current script:
<script>
function openNav() {
document.getElementById("nav").style.width = "140px";
document.getElementById("tabs").style.width = "70%;
document.getElementById("nav").style.borderRight = "2px solid #0bb1ff";
}
function closeNav() {
document.getElementById("nav").style.width = "0";
document.getElementById("tabs").style.width = "80%";
document.getElementById("nav").style.border = "0";
}
</script>
Button code:
<div class="drop-menu" id="menu" onclick="openNav();"><i class="fa fa-bars" aria-hidden="true"></i></div>