[Resolvido] Show/Hide com jQuery

.sukiTA~ · Janeiro 10, 2010

Boa noite!

Primeiramente, gostaria de agradecer pelo código.. sou iniciante, e isso tá me ajudando bastante!

Só que eu tenho uma dúvida, eu estou fazendo um site e iria usar esse efeito em dois itens:

>Sinopse

>Capítulos

Primeiro fiz com o Sinopse. OK, apareceu tudo certinho!

Depois eu fiz com o outro, só que quando eu clico para abrir, ele abre os dois de uma vez!

Tentei duplicar e alterar o nome do estilo conteudo, e mudei tb o id da segunda div, assim funcionou somente o Sinopse, mas quando clico no Capítulos, ele abre o Sinopse...

Se puderem me ajudar, eu agradeço!

Se quiser, posso postar o codigo aqui:

    <td colspan="5"><div id="conteudo">
      <h1 class="menutitle" id="mostra">Sinopse</h1> 
</div>
<div class="texto" id="oculto"> 
	A história gira em torno de um garoto desconfiado chamado Jio Freed, cujo objetivo é dominar o mundo, guarda-costas de uma menina chamada Ruby Crescent. Jio é um O.P.T. e, portanto, um descendente ou de anjos ou de demônios — o que o torna um dos poucos a ser capaz de usar as O-PARTS, itens que concedem grandes poderes aos que o usam. Ruby, aliás, é uma caçadora de O-PARTS, o que torna a aliança entre ambos bem conveniente. 

Autor: Seishi Kishimoto 
</div>
</td>
    </tr>
  <tr>
    <td colspan="5"><div id="conteudo"> 
	<h1 class="menutitle" id="mostra2">Capítulos</h1> 
</div>
<div id="oculto">Capítulos:<br />
        Cap. 1 A:<br />
          <a href="http://www.mediafire.com/?zxyvchltybm" target="_blank">Mediafire</a><br />
          <br />
          Cap. 1 B:<br />
            <a href="http://www.mediafire.com/?zeyst1x4s3c" target="_blank">Mediafire</a><br />
            <a href="http://www.4shared.com/file/52296156/7ee03ad9/Capitulo_01b_-_Amigos_Mundo_Shonen.html" target="_blank">4shared</a><br />
            <br />
            Cap. 1 C:<br />
              <a href="http://www.mediafire.com/?t9awfygdn21" target="_blank">Mediafire</a><br />
              <a href="http://www.4shared.com/file/52296155/e7e96b63/Capitulo_01c_-_Amigos_Mundo_Shonen.html" target="_blank">4shared</a></div>

Bom.. eu sei que fiz errado, sou iniciante então, peguem leve! hahahah'

Abraços!

William Bruno · Janeiro 10, 2010

Não se deve repetir IDs numa mesma página. Este é o erro.

Poste também o CSS e o Javascript que você usou.

.sukiTA~ · Janeiro 10, 2010

Pois é, eu tentei mudar o id, e duplicar o script alterando o nome pra poder usar um id válido, mas como eu disse no meu primeiro post, funcionou só o "Sinopse", o "Capítulos" abria o "Sinopse" ao inves de abrir o "Capítulos"

Mas aí ta o CSS:

<style type="text/css">
.menutitle{
	cursor:pointer;
	margin-bottom: 5px;
	background-color:#C00;
	color:#FFF;
	width:140px;
	padding:2px;
	text-align:center;
	font-weight:lighter;
	/*/*/border:0px solid #000000;/* */
}

.submenu{
margin-bottom: 0.5em;
}

.titulos{
	color:#C00;
	font:Verdana, Geneva, sans-serif;
	font-size:18px;
}

.texto{
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
}

A:link {
	font: 12px Verdana;
	color: #C00;
}
A:active {
	color: #C00;
	font-size: 12px;
}
A:visited {
	color: #CCC; 
	font-size: 12px;
}
A:hover {
	color: #C00;
	text-decoration: underline;
	font-size: 12px;
}
.copyright {
	color:#FFF;
	font-family:Verdana, Geneva, sans-serif;
	font-size:9px;
}
html {
	font: 12px Arial, Helvetica, sans-serif;
	text-align: center;
}
#conteudo, #oculto {
	width: 420px;
	margin: auto;
	padding: 10px;
	border: solid 1px #ccc;
}
#conteudo h1 {
	font-size: 15px;
	cursor: pointer;
}
#oculto {
	display: none;
	margin-top: 30px;
}
</style>

Quanto ao javascript, eu coloquei usei o jquery.js que você baixa do site do jquery, e usei esse script na head:

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() {
	$("h1#mostra").toggle(
		function() {
			$("div#oculto").fadeIn("slow"); // ou slideDown()
		},
		function() {
			$("div#oculto").fadeOut("slow"); // ou slideUp()
		}
	);
});
</script>

Matias Rezende · Janeiro 12, 2010

Olá .sukiTA~,

Os seus posts foram divididos em um novo tópico por estarem fora do contexto do tópico original.

Tópico original: link.

Link para o novo tópico: link

Carlos Eduardo

haruan · Janeiro 12, 2010

é impressao minha ou voce tem duas divs com o mesmo id?

.sukiTA~ · Janeiro 13, 2010

Tentei duplicar e alterar o nome do estilo conteudo, e mudei tb o id da segunda div, assim funcionou somente o Sinopse, mas quando clico no Capítulos, ele abre o Sinopse...

Sim, neste código sim... Mas depois conforme eu disse ali em cima, eu tentei mudar o nome da div e não deu certo, ainda criei um novo estilo, dupliquei e mudei os nomes do script usado na head e tentei aplicar tudo isso na segunda div pra fazer ele abrir separadamente, mas desta forma, funcionou apenas o "Sinopse", o "Capítulos" não abriu.

Se puder me ajudar com isso, ficaria agradecido, pois ainda não consegui solucionar esse problema, mesmo que seja um erro tosco, tenho certeza que é algo assim ^^

William Bruno · Janeiro 14, 2010

<head>

$(document).ready(function() {

$("#h_sinopse").toggle(

function(){

$("#sinopse").fadeIn("slow");

},

function(){

$("#sinopse").fadeOut("slow");

}

);

$("#h_capitulos").toggle(

function(){

$("#capitulos").fadeIn("slow");

},

function(){

$("#capitulos").fadeOut("slow");

}

);

});

</script>

.menutitle{

cursor:pointer;

margin-bottom: 5px;

background-color:#C00;

color:#FFF;

width:140px;

padding:2px;

text-align:center;

font-weight:lighter;

}

body {

font: 12px Arial, Helvetica, sans-serif;

text-align: center;

}

p {

font-family:Verdana, Geneva, sans-serif;

font-size:12px;

}

.submenu{

margin-bottom: 0.5em;

}

.titulos{

color:#C00;

font:Verdana, Geneva, sans-serif;

font-size:18px;

}

a:link {

font: 12px Verdana;

color: #C00;

}

a:visited {

color: #CCC;

font-size: 12px;

}

a:hover {

color: #C00;

text-decoration: underline;

font-size: 12px;

}

a:active {

color: #C00;

font-size: 12px;

}

.copyright {

color:#FFF;

font-family:Verdana, Geneva, sans-serif;

font-size:9px;

}

#conteudo h1 {

font-size: 15px;

cursor: pointer;

}

#sinopse,

#capitulos {

display: none;

margin-top: 30px;

width: 420px;

margin: auto;

padding: 10px;

border: solid 1px #ccc;

}

</style>

</head>

<body>

<h1 class="menutitle" id="h_sinopse">Sinopse</h1>

<p>A história gira em torno de um garoto desconfiado chamado Jio Freed, cujo objetivo é dominar o mundo,

guarda-costas de uma menina chamada Ruby Crescent. Jio é um O.P.T. e, portanto, um descendente ou de

anjos ou de demônios — o que o torna um dos poucos a ser capaz de usar as O-PARTS, itens que concedem

grandes poderes aos que o usam. Ruby, aliás, é uma caçadora de O-PARTS, o que torna a aliança entre

ambos bem conveniente.

Autor: Seishi Kishimoto</p>

</div>

<h1 class="menutitle" id="h_capitulos">Capítulos</h1>

<div id="capitulos">Capítulos:<br />

Cap. 1 A:<br />

<a href="http://www.mediafire.com/?zxyvchltybm" target="_blank">Mediafire</a><br />

<br />

Cap. 1 B:<br />

<a href="http://www.mediafire.com/?zeyst1x4s3c" target="_blank">Mediafire</a><br />

<a href="http://www.4shared.com/file/52296156/7ee03ad9/Capitulo_01b_-_Amigos_Mundo_Shonen.html" target="_blank">4shared</a><br />

<br />

Cap. 1 C:<br />

<a href="http://www.mediafire.com/?t9awfygdn21" target="_blank">Mediafire</a><br />

<a href="http://www.4shared.com/file/52296155/e7e96b63/Capitulo_01c_-_Amigos_Mundo_Shonen.html" target="_blank">4shared</a>

</div>

</body>

.sukiTA~ · Janeiro 15, 2010

Agora funcionou! E também agora eu já entendi como que faz!

Obrigado, me ajudou bastante http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Arquivado

[Resolvido] Show/Hide com jQuery

Recommended Posts

.sukiTA~ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

.sukiTA~ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matias Rezende 50

Compartilhar este post

Link para o post

Compartilhar em outros sites

haruan 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

.sukiTA~ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

.sukiTA~ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

php + mysql - where do select em campo varchar com dados numéricos com zeros a direita

select com varias categorias por horario

comando like (Mysql) no php

Fóruns

Tempo Real

Informação importante