Close and open div with same button

Question

I want to open and close my menu with same button. here is my code.

<script>
$('#open-menu').click(function() {
  $("#mySidenav").css("width" , "250px");
  $("#l_m").css({"marginLeft": "250px", "position" : "absolute", "width" : "100%"});
  // $(this).attr('id','close-menu');
});

$('#close-menu').click(function() {
  $("#mySidenav").css("width" , "0");
  $("#l_m").css("marginLeft" , "0");
});
</script>

Check this fiddle : https://jsfiddle.net/uyjogg5e/10/

(I tried to add the line that is commented but when I click on it, nothing happens)

Why ask the same question again, and specially when it has been answered already with working example. https://jsfiddle.net/uyjogg5e/11/ — Carsten Løvbo Andersen, Aug 02 '17 at 12:34

score 1 · Accepted Answer · answered Aug 02 '17 at 12:33

1

You can set the css property in a class:

.side-nav-show{
   width : 250px;
}
.l_m-show{
   marginLeft:250px;
   position:absolute;
   width:100%;
}

and then toggle the classes on click of element:

$('#open-menu').click(function() {
  $("#mySidenav").toggleClass('side-nav-show');
  $("#l_m").toggleClass('l_m-show');
});

Working Demo

answered Aug 02 '17 at 12:33

Milind Anantwar

81,290
25
94
125

1

correct way.... – Aug 02 '17 at 12:36
1

May i ask, why answer it when it has already been answered in the question the OP made yesterday? – Carsten Løvbo Andersen Aug 02 '17 at 12:38
I guess he tried to show him how it should work with the provided code. – Aug 02 '17 at 12:39
I wasn't knowing its asked previously – Milind Anantwar Aug 02 '17 at 13:00

score 1 · Answer 2 · answered Aug 02 '17 at 12:44

var a = 0;
$('#open-menu').click(function() {
    if(a % 2 == 0){
       $("#mySidenav").css("width" , "250px");
       $("#l_m").css({"marginLeft": "250px", "position": "absolute", "width" : "100%"});
    }
    else{
       $("#mySidenav").css("width" , "0");
       $("#l_m").css("marginLeft" , "0");
    }
    a++;
});

Close and open div with same button

2 Answers2