show/hide if in pure javascript

Question

I wrote a script that hide/show me sidenav. My problem is that I would like to have all in one function. First, whether that examined the sidenav is hidden or not. If hidden, by clicking showed sidenav and if sidenav visible, click to hide sidenav. My code:

function showSideNav () {
    var sideNav = document.getElementById("slide-out");

    sideNav.style.cssText = "transform: translateX(0); -webkit-transition: 0.5s;";
}

function closeSideNav () {
    var sideNav = document.getElementById("slide-out");

    sideNav.style.cssText = "transform: translateX(-100%); -webkit-transition: 0.5s;";
}

Answer 1

You can implement a boolean variable holding information if the sidenav is visible or not and according to it's value - show it or hide.

 var sideNav = document.getElementById("slide-out"), sideNavVisible = true; function toggleSideNav() { if (sideNavVisible) { sideNav.style.cssText = "transform: translateX(-100%); -webkit-transition: 0.5s;"; } else { sideNav.style.cssText = "transform: translateX(0); -webkit-transition: 0.5s;"; } sideNavVisible = !sideNavVisible; } 

 * { padding: 0; margin: 0; } #slide-out { height: 100px; width: 100px; background: blue; position: absolute; } .container { height: 100vh; width: 100vw } .x { right: 0; position: fixed; } 

 <div id='slide-out'></div> <button onclick="toggleSideNav()" class='x'>Toggle sidenav</button> <div class='container' onclick='sideNavVisible = true;toggleSideNav()'></div> 

Answer 2

I think it would be easier to manage if you put the CSS in a style sheet with classes, and then in JS toggle those classes:

 function toggleSideNav () { var sideNav = document.getElementById("slide-out"); sideNav.classList.toggle("hidden"); sideNav.classList.toggle("visible"); } // button for demo purposes: document.querySelector("button").addEventListener("click", toggleSideNav); 

 .visible { transform: translateX(0); -webkit-transition: 0.5s; } .hidden { transform: translateX(-100%); -webkit-transition: 0.5s; } 

 <button>Toggle</button> <div id="slide-out" class="visible">This is my test sliding div.</div>