Menu java script opens and closes other divs

Navigation
1

I have a problem that is simple but I do not use JS at a time so I had a problem.

I'm having to create a menu similar to amazon , but the site is responsive and I've done lists. But it did not look good so I'm doing it with DIVs (if anyone has a better idea, thank you) the problem is this.

When you click on a menu button it opens the div by the id of it, but when I click on another it should close the one that was open but I can not 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>
    
asked by anonymous 17.06.2015 / 19:17

2 answers

3

An elegant solution (as I see it) 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><divid="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>
    
17.06.2015 / 19:48
1

Save the last opened variable in a global variable and close it whenever you open a new one, if there is no "last", no dates. 

var ultimo;
    $(function(){
    $(".btn-toggle").click(function(e){
        if (ultimo)
          $(ultimo).toggle();
        e.preventDefault();
        el = $(this).data('element');
        $(el).toggle();
        ultimo = el;
    });
    
17.06.2015 / 19:30
Make program in C # that runs online [closed] Error testing a session