Mostrar un div y ocultarlo cuando haces click en otro

[alexkurban]

Hola a todos, llevo un dia entero intentanto buscar una solucion al tema, estoy haciendo una web y tengo el menu de navegacion en el lateral izquierdo, y todo el contenido en divs en la parte izquierda con "style = 'display: none'" en cada div con id unica, en un documento aparte tengo el siguiente codigo:

$(document).ready(function(){

$('#indexed1').on('click',function(){
$('#indexed').toggle();
});

$('#metals1').on('click',function(){
$('#metals').toggle();
});

$('#energy1').on('click',function(){
$('#energy').toggle();
});
});

Esto lo unico que haces es mostrarte el contenido pero si no le clicas 2 veces se queda ahi yi haces click en otro menu div el contenido queda por debajo.
Hay algun script que haga que cuando pinches uno se esconda el otro?

[horusorion]

Hazlo asi a ver:

primero ponle una clase a los 3 div de menu algo asi como opcion y a las 3 div de contenido(supongo que utilizas una para cada contenido) puedes ponerle contenido. Seria y luego haces lo siguiente:

Código Javascript:

$('.opcion').on('click', function(){
    //tomamos el id del elemento al que le dimos clic
    var id = $(this).arrt('id');
    //declaramos variable que guardara el id de la div de contenido
    var divCont;
 
    if(id == "indexed1")
        divCont = "#indexed";
    else
        if(id == "metals1")
            divCont = "#metals";
            else
                divCont="#energy";
 
 
    //ocultamos todas las div de contenido
    $(".contenido").fadeout(/*aqui puedes agregarle un tiempo para que tarde en desaparecer*/);
 
    //ahora hacemos que aparexca la div del contenido que queremos
    $(divCont).fadeIn(/*igual que fade out*/);
});
 

prueba asi a ver si te sirve

[monicapo]

Tienes que 'jugar' con todos los elementos por cada acción.

Código:

$(document).ready(function(){
    $('#indexed1').click(function(){
        $('#indexed').toggle();
        $('#metals').hide();
        $('#energy').hide();
    });

    $('#metals1').click(function(){
        $('#indexed').hide();
        $('#metals').toggle();
        $('#energy').hide();
    });

    $('#energy1').click(function(){
        $('#indexed').hide();
        $('#metals').hide();
        $('#energy').toggle();
    });
});