Divs being added one on top of the other

3

I have three menus, when I click on each one, it leaves a div that was as display:none as display:block . What is happening is that by clicking on Menu 1 and then on Menu 2, it is adding one div below the other.

Jquery looks like this:

$( "#dadosTecnicos" ).click(function() {
    $( "#mostrarDadosTecnicos" ).fadeToggle( 'fast', function() {});
});

$( "#galeria" ).click(function() {
    $( "#mostrarGaleria" ).fadeToggle( 'fast', function() {});
});

$( "#downloads" ).click(function() {
    $( "#mostrarDownload" ).fadeToggle( 'fast', function() {});
});

For example, clicking on id Technical data it shows the mostrarDadosTecnicos div and then click galeria , mostrarGaleria will stay below mostrarDadosTecnicos / p>

Example on JSFiddle

    
asked by anonymous 03.04.2014 / 15:36

1 answer

2

What is happening is that when you display one you forget to disappear the other two

In the example below I used .hide() at a glance here

Code

$( "#dadosTecnicos" ).click(function() {
    $( "#mostrarDadosTecnicos" ).fadeToggle( 'fast', function() {});
    $( "#mostrarGaleria" ).hide();
    $( "#mostrarDownload" ).hide();
});

$( "#galeria" ).click(function() {
    $( "#mostrarGaleria" ).fadeToggle( 'fast', function() {});
    $( "#mostrarDownload" ).hide();
    $( "#mostrarDadosTecnicos" ).hide();
});

$( "#downloads" ).click(function() {
    $( "#mostrarDownload" ).fadeToggle( 'fast', function() {});
    $( "#mostrarGaleria" ).hide();
    $( "#mostrarDadosTecnicos" ).hide();
});
    
03.04.2014 / 15:51