transpor simples código javascript para JQUERY

[marcelocardoso 6]

pessoal.
simples, como poderia transpor este código de JS para JQUERY?
 

function openNav() {
document.getElementById("navbar_myside").style.width = "100px";
document.getElementById("wrapper").style.marginLeft = "100px";
//document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeNav() {
document.getElementById("navbar_myside").style.width = "0";
document.getElementById("wrapper").style.marginLeft = "0";
//document.body.style.backgroundColor = "white";
}

mais incluindo este abaixo:
1) se clicado, muda o atributo de OPENNAV para CLOSENAV?
2) e ao contrário, de CLOSENAV para OPENNAV, usando IF ELSE para os dois.

Tentei assim, mas não foi...
 

clicked = true;
            $("btn_open").click(function() {
                if(clicked){
                    $(this).attr("onclick","closeNav()");
                    clicked  = false;
                } else {
                    $(this).attr("onclick","openNav()");
                    clicked  = true;
                } 
            });
            
            function openNav() {
                document.getElementById("navbar_myside").style.width = "100px";
                document.getElementById("wrapper").style.marginLeft = "100px";
                //document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
            }

            function closeNav() {
                document.getElementById("navbar_myside").style.width = "0";
                document.getElementById("wrapper").style.marginLeft = "0";
                //document.body.style.backgroundColor = "white";
            }

obrigado.
 

[Klawztro 3]

  //Troque o texto com aspas pelo nome da função apenas.
			$("btn_open").click(function() {
                if(clicked){
                    $(this).attr("onclick",closeNav);
                    clicked  = false;
                } else {
                    $(this).attr("onclick",openNav);
                    clicked  = true;
                } 
            });

 

[William Bruno 1501]

Não faz sentido nenhum você alterar o atributo onclick. 
O que você pretende com esse código?

[marcelocardoso 6]

segue bruno...

1) abrir navbar a esquerda:
 

<div class="navbar-header">
  <button id="btn_toggle" type="button" class="navbar-toggle collapsed fa fa-bars" data-toggle="collapse"></button>
  <!--<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">-->
  <a class="navbar-brand" href="#">
    <img src="../site/img/logotipo_branco.png" class="img-responsive">
  </a>
</div>

2) javascript
 

function openNav() {
    document.getElementById("navbar_myside").style.width = "100px";
    document.getElementById("wrapper").style.marginLeft = "100px";
}

function closeNav() {
    document.getElementById("navbar_myside").style.width = "0";
    document.getElementById("wrapper").style.marginLeft = "0";
}

3) seria transpor este iten 2, em JQUERY.
     a) 1 - teria que ao abrir o OPENNAV, já mudar o botão lá do item 1, para CLOSENAV.

     b) assim, no mesmo botão BARS, ele abre e fecha...

não sei se entendeu...
obrigado.

[marcelocardoso 6]

RESUMINDO TUDO:
 

1) Tenho este button, na NAVBAR:
 

<button type="button" class="navbar-toggle collapsed fa fa-bars" onclick="openNav()"></button>

Ele chama a função OPENNAV

2) ele chama esta função, que gostaria de transpor para JQ, pois está em JAVASCRIPT
 

            function openNav() {
                document.getElementById("navbar_myside").style.width = "100px";
            }

            function closeNav() {
                document.getElementById("navbar_myside").style.width = "0";
            }

3) Após pegar a função e adaptar para JQUERY, gostaria dentro da função JQUERY, lá no item 1, mudar o ONCLICK OPENNAV para CLOSENAV, sem mudar o BOTAO, apenas o onclick, assim aproveito o mesmo botão para FECHAR e ABRIR a NAVBAR_MYSIDE da função.

Entenderam agora....
Se puderem ajudar, agradeço...
Olhei bastante códigos exemplos na internet, tentei adaptar, mas nada....
Obrigado.

 

[marcelocardoso 6]

Pessoal, após muitas tentativas...
Desde já agradeço as visualizações, mas consegui sozinho, estudando e estudando meu caso.
consegui resolver assim, segue para conhecimento de outros.

 

<script type="text/javascript">
  //CODE - navbar e sidebar collapse
  $(function() {
    $('#nav-open').on('click', function() {
      $('#navbar_myside').css('width','100px');
      $('#nav-open').hide();
      $('#nav-close').show();
    });
  });

  $(function() {
    $('#nav-close').on('click', function() {
      $('#navbar_myside').css('width','0px');
      $('#nav-close').hide();
      $('#nav-open').show();
    });
  });
</script>

Obrigado.... até...

[marcelocardoso 6]

postei o código acima, funciona, mas ainda tem erro...
quando fica no dispositivo mobile, depois se expand o navegador, ainda continua a barra...
o ideal após sair dos 480pixels, deveria sumir...

EXEMPLOS, agradeceria para implementar aqui...
Obrigado.