Exibir uma div, esconder as outras

[dimiguel 0]

Estou trabalhando em um projeto onde tem um mapa do Brasil com os representantes da empresa. O mapa está feito, com seus devidos mapeamentos em CSS e links. Tudo certinho. Minha dificuldade está em abrir a div do estado sobre o qual o usuário clica para exibir os representantes. Na verdade eu até consigo exibir a div, mas não sei como fazer para fechar uma div ao ser clicado em outro estado.

 

Por exemplo: o usuário clicou no estado de SP e abriu a div com os representantes daquele estado. Ao clicar no estado do RJ (ou qualquer outro), o JS deve fechar o estado de SP e abriu o clicado.

 

Alguém pode me dar uma luz nesse assunto? Ah, estou trabalhando com JQuery.

 

Agradeço.

[Tiago Sabadini 3]

Você pode fazer o seguinte:

 

Exemplo: http://jsbin.com/avisot/1/edit

 

1. Capture o elemento que está sendo clicado;

2. Busque dentro da div pai todos os elementos e feche aqueles que são diferentes do elemento que foi clicado.

<div id="estados">
    <div id="es" class="estado"></div>
    <div id="rj" class="estado"></div>
    ...
</div>

$('.estado').click(function(){
    var estado_clicado = $(this).attr('id');
    $('#estados').find('div').each(function(i, el){
       if( $(this).attr('id') != estado_clicado ){
          $(this).hide();
    }
    });
});

 

[dimiguel 0]

 

Você pode fazer o seguinte:

 

Exemplo: http://jsbin.com/avisot/1/edit

 

1. Capture o elemento que está sendo clicado;

2. Busque dentro da div pai todos os elementos e feche aqueles que são diferentes do elemento que foi clicado.

<div id="estados">
    <div id="es" class="estado"></div>
    <div id="rj" class="estado"></div>
    ...
</div>

$('.estado').click(function(){
    var estado_clicado = $(this).attr('id');
    $('#estados').find('div').each(function(i, el){
       if( $(this).attr('id') != estado_clicado ){
          $(this).hide();
    }
    });
});

 

 

 

Interessante sua solução. Vou testar aqui. Eu fiz assim, e está funcionando:

 

    var nomeDiv;
    function rep(nomeDiv) {
        $(this).click(function() {
            $('#representantes_estados > div').hide();
            $('#'+nomeDiv).toggle()
        })        
    }