Nav-Burger Collapse onclick

Question

Good afternoon, looking for someone to help me turn a Nav-Burger from the fontawesome (fa-fa-bars) to X when a click is done and vice versa.

Answer 1

Just add one eventListener and swap the class of the element validating whether the menu is open (then it is closing and must be changed to fa-close) or not (is opening and must change to fa-bars).

Here’s a simple example of a gift.

var aberto = false;

document.getElementById('troca').addEventListener('click', function(){
  this.className  = aberto ? "fa fa-close" : "fa fa-bars";
  aberto = !aberto;
});

div { font-size: 50px; }
span { cursor: pointer; }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div> <!-- Isto é só pra mudar o tamanho do ícone -->
    <span id="troca" class="fa fa-bars"></span>
</div>