How Do i Open and Close Leftside navbar with click on Logo of website

Question

I have an issue with my web pages in which I want to toggle the left side navigation bar open and close both by clicking on Logo of the web page. but i am not able to do same, but unfortunately, i am able to open the navbar with click on Logo but not able to do same for close navbar by click on the logo (instead it close by click on outside area of navbar), so i have tried some of the code of my web page which is available in jsfiddle snippet in following. it is good for me if anyone can able to solve this

Note: Please Check Following Jsfiddle for understanding it better.

https://jsfiddle.net/v2a7xdmr/

score 1 · Accepted Answer · answered Aug 17 '17 at 07:37

1

Check the fiddle at https://jsfiddle.net/Lfa6vef6/2/ - this seems to be what you want to do. Track if the sidebar is expanded or not in a variable and use its value to either invoke openNav or closeNav to toggle the sidebar.

answered Aug 17 '17 at 07:37

Dhananjay

544
3
7

Thanks Dhananjay. this solution is perfect, which i am looking for. – mittal3795 Aug 17 '17 at 09:46
How do i same close navbar (logo click done) also with outside the content area of page – mittal3795 Aug 19 '17 at 07:20
This post might help: https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element – Dhananjay Aug 22 '17 at 07:28

score 1 · Answer 2 · answered Aug 17 '17 at 08:24

You can try the bellow script. I test it at the jsfiddle link you share. I just change the sidebar with sidebar_test. Because sidebar consider the left bar of the jsfiddle.

(window.openNav = function() {
   var $device_width = $( window ).width();
    if($device_width < 767 )
    {
            if(document.getElementById("sidebar").offsetWidth==0){
        document.getElementById("sidebar").style.width = "250px";
                }
                else{
                closeNav();
        }

    }else {
     if(document.getElementById("sidebar").offsetWidth==0){
        document.getElementById("sidebar").style.width = "350px";
                }
                else{
                closeNav();
        }
    }
});

(window.closeNav = function() {

    document.getElementById("sidebar").style.width = "0";
});

How Do i Open and Close Leftside navbar with click on Logo of website

2 Answers2