Adding second functionality to a single button

Question

I have a button which I want to toggle between two 'functionalities.' I want it to toggle my menu open and close

I want to add onclick="openNav()" on first click and then onclick="closeNav()" on the second html

<button id="nav-icon" class="navbar-toggler hidden-sm-up" type="button" onclick="openNav()"></button>

I'm not sure the best way to do this, the code works if they are on two separate buttons.

EDIT: I am using Wordpress so all the javascript is in a separate .js file brought in

Answer 1

You can change onclick of the element at end of both functions.

let btn = document.getElementById('nav-icon');
function openNav(){
  console.log('openNav called');
  btn.onclick = closeNav
}
function closeNav(){
  console.log('closeNav called');
  btn.onclick = openNav
}

<button id="nav-icon" class="navbar-toggler hidden-sm-up" type="button" onclick="openNav()"></button>