JavaScript Toggle between 2 Functions

Question

I want to toggle between two functions in my Webpage but I don't know how...

Code:

<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" type="text/css" media="screen" href="/css/style.css"/>
    <title>My Project</title>

    <script>
        function openNav() {
            document.getElementById("mySidenav").style.width = "250px";
            document.getElementById("main").style.marginLeft = "250px";
            document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
        }

        function closeNav() {
            document.getElementById("mySidenav").style.width = "0";
            document.getElementById("main").style.marginLeft = "0";
            document.body.style.backgroundColor = "white";
        }
    </script>
</head>
<body>
    <div id="main">
        <div class="head">
            <span class="openbtn" id="navbtn" onclick="openNav(); closeNav(); ">☰</span>
            <p> Do Re Mi Fa So Laa</p>
        </div>
    </div>
    <div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="openbtn" onclick="closeNav()">☰xx</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
    </div>
</body>

I want to switch between the navopen and the navclose function...

do not put 'thank you' comments in answers - add them AS COMMENTS on the answer. Plus, learn how to accept an answer. — Rachel Gallen
– Rachel Gallen, Commented May 11, 2016 at 14:15

Fonzy · Accepted Answer · 2016-05-11 14:06:58Z

8

Something like this?

    var nav = false;

    function openNav() {
      document.getElementById("mySidenav").style.width = "250px";
      document.getElementById("main").style.marginLeft = "250px";
      document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
      nav = true;
                    }

    function closeNav() {
      document.getElementById("mySidenav").style.width = "0";
      document.getElementById("main").style.marginLeft = "0";
      document.body.style.backgroundColor = "white";
      nav = false;
                    }

    function toggleNav() {
      nav ? closeNav() : openNav();
    }

then just use toggleNav() in the onClick()

answered May 11, 2016 at 14:06

Fonzy

6913 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bojan Petkovski · Accepted Answer · 2016-05-11 14:12:13Z

Use a flag to check if the nav is open or not.

var isOpen = false;

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
  isOpen = true;
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
  isOpen = false;
}

var btn = document.getElementById('navbtn');

btn.addEventListener('click', function() {
  if (isOpen) {
    closeNav();  
  } else {
    openNav();
  }
}, false);

#mySidenav {
  width: 0;
  overflow:hidden;
}

<div id="main">
  <div class="head">
    <span class="openbtn" id="navbtn">☰</span>
    <p>Do Re Mi Fa So Laa</p>
  </div>
</div>
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="openbtn" onclick="closeNav()">☰xx</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

Collectives™ on Stack Overflow

JavaScript Toggle between 2 Functions

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related