Dificuldade em exibir e ocultar Div

willkey · Agosto 3, 2013

Em 2006 fiz minhas aulas referente a Web, mas como o interesse passou dois anos depois larguei pro lado, mas... agora que preciso novamente estou correndo atras do esquecido e esta bem mais dificil do que imaginei que fosse, especificamente no caso abaixo:

Tenho um menu na horizontal com 8 "opções" uma ao lado da outra e quando clico em alguma das opções logo abaixo aparece a informação referente ao que foi selecionado, porém, o que mais quero nao estou conseguindo fazer, pra mim é aparentemente "simples" mas nao consigo fazer, exemplo: ao clicar na opção 1 a informação referente a essa opção aparece logo abaixo e quando eu clicar na opção 2 a informação aberta referente a opção 1 seja automaticamente ocultada e no lugar apareça as informações referente a opção 2 e assim sucessivamente, ou seja, so fique visivel a informação referente a opção selecionada, sem ter que alterar a posição horizontal em que se encontram as opção, nada mais nada menos.

Os codigos abaixo estao como quero tanto em posicionamente como em visualização, exceto, o exibir e ocultar que nao esta como quero, coloquei nome de times, no codigo final vou colocar escudos no lugar dos nomes, e os escudos na horizontal um ao lado do outro dao uma melhor leitura da pagina quando as opções forem abertas.

<div id="times">

<div class="barcelona" style="display:none;">
<p>barcelona - barcelona - barcelona</p>  
</div>

<div class="chelsea" style="display:none;">
<p>chelsea - chelsea - chelsea</p> 
</div>

<div class="bmg" style="display:none;" >
<p>bmg - bmg - bmg</p>
</div>

<div class="realmadrid" style="display:none;">
<p>realmadrid - realmadrid - realmadrid </p> 
</div>

<div class="manchesterunited" style="display:none;">
<p>manchester - manchester - manchester</p>
</div>

<div class="juventus" style="display:none;">
<p>juventus - juventus - juventus</p>
</div>

<div class="bayernmunchen" style="display:none;">
<p>bayern - bayern - bayern </p>
</div>

<div class="intermilao" style="display:none;">
<p>inter - inter - inter</p>
</div>

</div>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">// <![CDATA[
 
jQuery.fn.toggleText = function(a,b) {
return   this.html(this.html().replace(new RegExp("("+a+"|"+b+")"),function(x){return(x==a)?b:a;}));
}

$(document).ready(function(){
	$('.barcelona').before('<span><b>BARÇA</b></span>');
	$('.chelsea').before('<span><b>CHELSEA</b></span>');
	$('.bmg').before('<span><b>BMG</b></span>');
	$('.realmadrid').before('<span><b>REAL</b></span>');
	$('.manchesterunited').before('<span><b>UNITED</b></span>');
	$('.juventus').before('<span><b>JUVE</b></span>');
	$('.bayernmunchen').before('<span><b>BAYERN</b></span>');
	$('.intermilao').before('<span><b>INTER</b></span>');

$('span', '#times').click(function() {
		$(this).next().slideToggle('slow')
		siblings('.barcelona:visible').slideToggle('fast');
		siblings('.chelsea:visible').slideToggle('fast');
		siblings('.bmg:visible').slideToggle('fast');
		siblings('.realmadrid:visible').slideToggle('fast');
		siblings('.manchesterunited:visible').slideToggle('fast');
		siblings('.juventus:visible').slideToggle('fast');
		siblings('.bayernmunchen:visible').slideToggle('fast');
		siblings('.intermilao:visible').slideToggle('fast');		

		$(this).toggleText('Revelar','Esconder')
		.siblings('span').next('.barcelona:visible').prev()
		.siblings('span').next('.chelsea:visible').prev()
		.siblings('span').next('.bmg:visible').prev()
		.siblings('span').next('.realmadrid:visible').prev()
		.siblings('span').next('.manchesterunited:visible').prev()
		.siblings('span').next('.juventus:visible').prev()
		.siblings('span').next('.bayernmunchen:visible').prev()
		.siblings('span').next('.intermilao:visible').prev()
		
		.toggleText('Revelar','Esconder')
	});
})
// ]]></script>

Encontrei esse topico

http://forum.imasters.com.br/topic/403029-resolvidofazer-div-desaparecer-ao-clicar/

usei os codigos contidos no link acima e o exibir/ocultar ficaram como eu quero, porem, o menu ficou na vertical e com as informações aparecendo acima dele, achei esse metodo bem mais simples mas o posicionamento do menu e das informações referente a ele dificulta o objetivo "estetico" da pagina e nao conseguir deixar na vertical com as informaçoes aparecendo abaixo.

Se houver sugestoes de um codigo menor ao que postei mas, com o formato de menu e resultado que preciso peço que indiquem.

Progjunior Daniel · Agosto 7, 2013

Vê se isso ajuda. Diminui as opções, mas voce pode fazer igual ao o exemplo, mudando somente o nome.

<script type="text/javascript">
$(document).ready(function(){
	$(".barcelona").hide();
	$(".chelsea").hide();
	$(".bmg").hide();
	
	$(".cidades").click(function(){
		var id = this.id;	
			$('.'+id).slideToggle("fast");
		});
});
</script>

<div id="times">

<div class="cidades" id="barcelona">
<span>Barcelona</span>
<p class="barcelona">barcelona - barcelona - barcelona</p>  
</div>
<br>

<div class="cidades" id="chelsea" >
<span>Chelsea</span>
<p class="chelsea">chelsea - chelsea - chelsea</p> 
</div>
<br>
<div class="cidades" id="bmg">
<span>Bmg</span>
<p class="bmg">bmg - bmg - bmg</p>
</div>

</div>

willkey · Agosto 8, 2013

Vê se isso ajuda. Diminui as opções, mas voce pode fazer igual ao o exemplo, mudando somente o nome.

<script type="text/javascript">
$(document).ready(function(){
	$(".barcelona").hide();
	$(".chelsea").hide();
	$(".bmg").hide();
	
	$(".cidades").click(function(){
		var id = this.id;	
			$('.'+id).slideToggle("fast");
		});
});
</script>

<div id="times">

<div class="cidades" id="barcelona">
<span>Barcelona</span>
<p class="barcelona">barcelona - barcelona - barcelona</p>  
</div>
<br>

<div class="cidades" id="chelsea" >
<span>Chelsea</span>
<p class="chelsea">chelsea - chelsea - chelsea</p> 
</div>
<br>
<div class="cidades" id="bmg">
<span>Bmg</span>
<p class="bmg">bmg - bmg - bmg</p>
</div>

</div>

Consegui de outra forma e ficou perfeito pro meu objetivo. Abaixo código exemplo.

HTML

<p style="text-align: center;"><a style="cursor: pointer;" onclick="mostra('arsenal');">ARSENAL  </a>
<a style="cursor: pointer;" onclick="mostra('barcelona');">BARCELONA  </a>
<a style="cursor: pointer;" onclick="mostra('bmg');">BMG  </a>
<a style="cursor: pointer;" onclick="mostra('chelsea');">CHELSEA  </a>
<a style="cursor: pointer;" onclick="mostra('intermilao');">INTER DE MILÃO  </a>
<a style="cursor: pointer;" onclick="mostra('juventus');">JUVENTUS  </a> 
<a style="cursor: pointer;" onclick="mostra('manchester');">MANCHESTER UNITED  </a> 
<a style="cursor: pointer;" onclick="mostra('realmadrid');">REAL MADRID</a>  </p>
<center>
<div id="arsenal" style="display: none;"><b><i>ARSENAL - ARSENAL</i></b></div>
<div id="barcelona" style="display: none;"><b><i>BARCELONA - BARCELONA</i></b></div>
<div id="bmg" style="display: none;"><b><i>BMG - BMG</i></b></div>
<div id="chelsea" style="display: none;"><b><i>CHELSEA - CHELSEA</i></b></div>
<div id="intermilao" style="display: none;"><b><i>INTER DE MILÃO</i></b></div>
<div id="juventus" style="display: none;"><b><i>JUVENTUS - JUVENTUS</i></b></div>
<div id="manchester" style="display: none;"><b><i>MANCHESTER UNITED - MANCHESTER UNITED</i></b></div>
<div id="realmadrid" style="display: none;"><b><i>REAL MADRID - REAL MADRID</i></b></div>
</center>

Script

<script type="text/javascript">// <![CDATA[
function mostra(theId){
var theArray= new Array('arsenal','barcelona','bmg','chelsea','intermilao','juventus','manchester','realmadrid');
w=document.getElementById(theId)
if(w.style.display=="block"){w.style.display='none';}else{ 

 
 
	   for(i=0; i<theArray.length; i++){
			if(theArray[i] == theId){
				w.style.display='block';
			}else{
				document.getElementById(theArray[i]).style.display='none';
			}
	  }
	  }
	  
}
// ]]></script>

Arquivo pronto:

Exibir_Ocultar.html

Entrar

Arquivado

Dificuldade em exibir e ocultar Div

Recommended Posts

willkey 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Progjunior Daniel 34

Compartilhar este post

Link para o post

Compartilhar em outros sites

willkey 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante