show hide

[Weblur 0]

Olá pessoal, tudo bem??

 

Estou engatinhando na montagem de uma tela aqui, vou tentar explicar:

 

Preciso q ao clicar sobre um evento (Rio de Janeiro), seja exibido os detalhes do mesmo e ao tirar o mouse de cima, os detalhes somem. Respectivamente ao clicar sobre o evento São Paulo, carregue o evento correspondente.

 

Rio de Janeiro (RJ)

Dia 02/08

 

Mostrar 02/08 - Rio de Janeiro - Hotel X, às 14 horas.

 

São Paulo (SP)

Dia 04/08

 

 

Eis meu html:

 

<div id="evento">
<span class="cidade">Rio de Janeiro (RJ)</span> 
<span class="data">
02/08</span>

<span class="cidade">São Paulo (SP)</span>
<span class="data">
04/08 </span>

</div>

 

CSS

 

#evento {

padding-top:1%;
}

.cidade {
font-family: "Courier New", Courier, monospace;
font-size: 16px;
font-weight: bold;
height:27px;
color: #FFFFFF;
text-decoration: none;
padding-top: 6px;
float: left;

}

.data {
font-family: "Courier New", Courier, monospace;
font-size: 14px;
height:20px;
color: #000;
text-decoration: none;
padding-top: 0px;
padding-bottom: 10px;
float: left;

}

 

Vcs poderia, por favor, me ajudar??

Desde já obrigada!!

['''''''''''''' 0]

<!-- jQuery.com -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var show = "#opc_1";
$(document).ready(function(){
$("div a").click(function(){

	$(show).hide();

	show = $(this).attr('id');
	show = "#opc"+show;

	$(show).show();

});
});
</script>
<style type="text/css">
/*Deixa as SPANs escondidas!*/
span[class=hide]{display:none;}

</style>

<div><a href="#" id="_1">Clique aqui para ver os eventos de São Paulo</a></div>
<span id="opc_1" class="hide">EVENTOS DE SÃO PAULO</span>

<div><a href="#" id="_2">Clique aqui para ver os eventos do Rio de Janeiro</a></div>
<span id="opc_2"  class="hide">EVENTOS DO RIO DE JANEIRO</span>

[Weblur 0]

Super SUPER obrigada!!!!!!!!!

 

Posso te encomodar mais um pouquinho??

Pra ficar perfeito, eu gostaria q o "ID_1" sumisse e o spam "opc_1" ficasse em cima dele.

Você poderia me ajudar?? rsrs

Obrigadíssima mais uma vez!!

 

Oi, conseguir fazer fechar!!

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 
var show = "#opc_1"; 
$(document).ready(function(){ 
       $("div a").click(function(){ 

               $(show).hide(); 

               show = $(this).attr('id'); 
               show = "#opc"+show; 

               $(show).show(); 

       }); 


	$("#opc").click(function(){ 

               $(show).hide(); 

               show = $(this).attr('id'); 
               show = "#div a"+show; 

               $(show).show(); 

       }); 
}); 
</script> 

<div id="cidade"><a href="#" id="_1">São Paulo (SP)<br /> <span class="data"> 20/06</span></a></div> 
<span id="opc_1" class="hide"><a href="#" id="opc_1">bla bla bla bla bla bla bla</a></span> 

 

 

Agora só preciso ele fique na mesma posição!!