Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

.sukiTA~

[Resolvido] Show/Hide com jQuery

Por , em Javascript

Recommended Posts

.sukiTA~    0

.sukiTA~
Postado

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!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

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

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

.sukiTA~    0

.sukiTA~
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Matias Rezende    50

Matias Rezende
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

.sukiTA~    0

.sukiTA~
Postado

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 ^^

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(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>

<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;

}

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>

 

<div class="texto" id="sinopse">

<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><!-- /sinopse -->

 

<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><!-- /capitulos -->

</body>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito