Divs being added on top of each other

Question

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

Jquery is 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: by clicking on id data he shows the div mostrarDadosTecnicos if after I click on galeria, the mostrarGaleriawill stay under mostrarDadosTecnicos.

Example in Jsfiddle

Answer 1

What’s happening is that when you exhibit one you forget to disappear the other two

in the example below I used the .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();
});