Java script menu opens and closes other Ivs

Question

I have a problem that is simple but I do not use JS a while back then I got a problem.

I’m having to create a menu similar to the Amazon, but the site is responsive and I did with lists. But it was not good so I’m doing with Divs (in case someone has better idea thank you) the problem is the following.

By clicking on a menu button it opens the div for id of the same, but when I click on another he should close the one that was open but I can’t close them.

I’m using the following code to stay as light as possible.

JS

$(function(){
    $(".btn-toggle").click(function(e){
        e.preventDefault();
        el = $(this).data('element');
        $(el).toggle(); 
    });

});

html

<div id="menu_drop">
    <ul class="menu_topo">
        <li ><a href="#" ><button type="button" class="btn-toggle" data-element="#minhaDiv">Mídias e Embalagens</button></a></li>
        <li><a href="#"><button type="button" class="btn-toggle" data-element="#minhaDiv1">Informática</button></a></li>
        <li><a href="#">Eletrônicos</a></li>
        <li><a href="#">Telefonia</a></li>
        <li><a href="#">Papelaria e Escritório</a></li>
        <li><a href="#">Cine e Foto</a></li>
        <li><a href="#">Utilidades</a></li>
        <li><a href="#">Esporte e Lazer</a></li>
        <li><a href="#">Brinquedos</a></li>   
     </ul>

</div><!-- menu drop-->
<div id="minhaDiv" class="menu_lado">Conteudo</div>
<div id="minhaDiv1" class="menu_lado">Conteudo1</div>

Answer 1

An elegant solution (in my view) can be achieved as follows:

$(".btn-toggle").click(function(e){
  e.preventDefault();
  el = $(this).data('element');
  $(el).toggle();
  $(el).siblings().hide();
});

.menu_lado:not(:first-of-type){
      
  /* Construído assim, o primeiro elemento será mostrado quando a página carregar. Se você quiser esconder todos por padrão, é só retirar os pseudo-elementos do seletor */
      
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="menu_drop">
  <ul class="menu_topo">
       
    <!-- Reduzi o html pra leitura ficar mais fácil --> 
         
    <li><a href="#"><button type="button" class="btn-toggle" data-element="#minhaDiv">Mídias e Embalagens</button></a></li>
    <li><a href="#"><button type="button" class="btn-toggle" data-element="#minhaDiv1">Informática</button></a></li>   
   </ul>
</div><!-- menu drop-->

<div class="content">
      
  <!-- Envolvi as divs de conteudo em uma div, pra facilitar o acesso via js -->
      
  <div id="minhaDiv" class="menu_lado">Midias e embalagens</div>
  <div id="minhaDiv1" class="menu_lado">Informatica</div>
</div>

Answer 2

Store the last open in a global variable and close it whenever you open a new one, if there is no "last one", you do not close it.

var ultimo;
    $(function(){
    $(".btn-toggle").click(function(e){
        if (ultimo)
          $(ultimo).toggle();
        e.preventDefault();
        el = $(this).data('element');
        $(el).toggle();
        ultimo = el;
    });