Mobile menu: Click to open and then to close

Question

I have this code to open a responsive menu, but I couldn’t get it to close.

$('#menuMobile').on("click", function() {
  $('.showMenu').slideDown();
});

.container {
  width: 100%;
  background: #000;
}


/* Cabeçalho */

header .welcome .container .fa-facebook-square,
header .welcome .container .fa-instagram {
  display: none;
}

header .welcome .container a {
  float: right;
}

header .welcome .container a i,
header .welcome .container a span {
  font-size: 14px!important;
}

header .container .logo {
  width: 60%;
  padding: 15px;
}

header .container .menu {
  display: none;
}

header .container .menuMobile {
  display: block;
  position: relative;
  height: 100px;
  font: 400 25px 'Open Sans', sans-serif;
}

header .container .showMenu ul li {
  list-style: none;
  width: 100%;
  text-align: center;
}

header .container .showMenu ul li a {
  color: #fff;
}

header .container .menuMobile #menuMobile {
  color: #fff;
  position: absolute;
  right: 36px;
  top: 30px;
  font-size: 40px;
}

header .container .showMenu {
  display: none;
  background: #000;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

  <div class="welcome">
    <div class="container">
      <a href="tel:[phone]"><i class="fas fa-phone"></i><span>(54) 3401-3696</span></a>
      <a href=""><i class="fab fa-facebook-square"></i></a>
      <a href="" title=""><i class="fab fa-instagram"></i></a>
    </div>
  </div>
  <div class="container">
    <div class="logo">
      <img src="assets/img/logo_owlaser.png">
    </div>

    <div class="menuMobile">
      <i class="fas fa-bars" id="menuMobile"></i>
    </div>
    <nav class="showMenu">
      <ul>
        <li><a href="#inicio">inicio</a></li>
        <li><a href="#empresa">empresa</a></li>
        <li><a href="#produtos">produtos</a></li>
        <li><a href="#contato">contato</a></li>
      </ul>
    </nav>
  </div>
</header>

Answer 1

Use slideToggle() instead of slideDown(). This will toggle between open and close:

• Documentation of the slideToggle()

$('#menuMobile').on("click", function() {
  $('.showMenu').slideToggle();
});

.container {
  width: 100%;
  background: #000;
}


/* Cabeçalho */

header .welcome .container .fa-facebook-square,
header .welcome .container .fa-instagram {
  display: none;
}

header .welcome .container a {
  float: right;
}

header .welcome .container a i,
header .welcome .container a span {
  font-size: 14px!important;
}

header .container .logo {
  width: 60%;
  padding: 15px;
}

header .container .menu {
  display: none;
}

header .container .menuMobile {
  display: block;
  position: relative;
  height: 100px;
  font: 400 25px 'Open Sans', sans-serif;
}

header .container .showMenu ul li {
  list-style: none;
  width: 100%;
  text-align: center;
}

header .container .showMenu ul li a {
  color: #fff;
}

header .container .menuMobile #menuMobile {
  color: #fff;
  position: absolute;
  right: 36px;
  top: 30px;
  font-size: 40px;
}

header .container .showMenu {
  display: none;
  background: #000;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

  <div class="welcome">
    <div class="container">
      <a href="tel:[phone]"><i class="fas fa-phone"></i><span>(54) 3401-3696</span></a>
      <a href=""><i class="fab fa-facebook-square"></i></a>
      <a href="" title=""><i class="fab fa-instagram"></i></a>
    </div>
  </div>
  <div class="container">
    <div class="logo">
      <img src="assets/img/logo_owlaser.png">
    </div>

    <div class="menuMobile">
      <i class="fas fa-bars" id="menuMobile"></i>
    </div>
    <nav class="showMenu">
      <ul>
        <li><a href="#inicio">inicio</a></li>
        <li><a href="#empresa">empresa</a></li>
        <li><a href="#produtos">produtos</a></li>
        <li><a href="#contato">contato</a></li>
      </ul>
    </nav>
  </div>
</header>