Abrir uma função apos clicar em um link

[rauan 0]

Bom pessoal estou fazendo , e estou com um problema , queria saber como eu faço para quando eu apertar no titulo abrir uma div em baixo ou uma janela flutuante , isso explica melhor :

 

Basicamente isso, Abraços

[LeoO_DF 22]

<div id="Titulo"></div>
<div id="Conteudo" style="display:none;"></div>

$(document).ready(function() {
	$("#Titulo").click(function(){ 
		if($("#Conteudo").is(":visible"))
		{
			$("#Conteudo").fadeOut('fast');
		}
		else
		{
			$("#Conteudo").fadeIn('fast');
		}
	});
});

Com efeito:

$(document).ready(function() {
	$("#Titulo").click(function(){ 
		$("#Conteudo").animate({ height: "toggle" });
	});
});

[rauan 0]

 

Funcionou perfeitamente só que iria precisar de mais de um código tipo esse já que na pagina irão ser varios links desse tipo

[LeoO_DF 22]

<div id="Titulo" class="1"></div>
<div id="Conteudo-1" style="display:none;"></div>

$(document).ready(function() {
	$("#Titulo").click(function(){ 
		var ConteudoID = $("#Titulo").attr("class");
		if($("#Conteudo-"+ConteudoID).is(":visible"))
		{
			$("#Conteudo-"+ConteudoID).fadeOut('fast');
		}
		else
		{
			$("#Conteudo-"+ConteudoID).fadeIn('fast');
		}
	});
});

Há outros meios, porem esse é o mais simples

[rauan 0]

 

Só esta abrindo um , os outros tão normal

[LeoO_DF 22]

Não cara você não deve colocar todas com class="1" isso é uma contagem, na primeira div class="1" na segunda class="2"

<div id="Titulo" class="1"></div>
<div id="Conteudo-1" style="display:none;"></div>
<div id="Titulo" class="2"></div>
<div id="Conteudo-2" style="display:none;"></div>
<div id="Titulo" class="3"></div>
<div id="Conteudo-3" style="display:none;"></div>
<div id="Titulo" class="4"></div>
<div id="Conteudo-4" style="display:none;"></div>
<div id="Titulo" class="5"></div>
<div id="Conteudo-5" style="display:none;"></div>
<div id="Titulo" class="6"></div>
<div id="Conteudo-6" style="display:none;"></

$(document).ready(function() {        
	$("div#Titulo").click(function(event){ 
                var ConteudoID = $(this).attr("class"); 
		if($("#Conteudo-"+ConteudoID).is(":visible"))
		{
			$("#Conteudo-"+ConteudoID).fadeOut('fast');
		}
		else
		{
			$("#Conteudo-"+ConteudoID).fadeIn('fast');
		}
	});
});

[rauan 0]

<div class="musica"><p id="Titulo" class="1">Mag - Rio De Janeiro Part 2</p></div>
<div id="Conteudo-1" style="display:none;">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" name="9278847_19957253" width="100%" height="80" id="9278847_19957253"><param name="movie" value="http://api.zippyshare.com/api/player.swf?file=9278847&server=58&baseurl=http://api.zippyshare.com/api/&flashid=zs_player9278847&autostart=true&availablequality=both&bordercolor=#2E2D2E&forecolor=#E3E3E3&backcolor=#2E2D2E&darkcolor=#FF0000&lightcolor=#C20202" /><param name="quality" value="high" /><param name="scriptAccess" value="always" /><embed src="http://api.zippyshare.com/api/player.swf?file=9278847&server=58&baseurl=http://api.zippyshare.com/api/&flashid=zs_player9278847&autostart=true&availablequality=both&bordercolor=#2E2D2E&forecolor=#E3E3E3&backcolor=#2E2D2E&darkcolor=#FF0000&lightcolor=#C20202" width="100%" height="80" quality="high" pluginspage="http://www.adobe.com/go/getflashplayer" type="application/x-shockwave-flash" scriptaccess="always" name="9278847_19957253"></embed></object>

</div>


<div class="musica"><p id="Titulo" class="2">Mag - Rio De Janeiro Part 2</p></div>
<div id="Conteudo-2" style="display:none;">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" name="5053686_191015569" width="100%" height="80" id="5053686_191015569"><param name="movie" value="http://api.zippyshare.com/api/player.swf?file=5053686&server=52&baseurl=http://api.zippyshare.com/api/&flashid=zs_player5053686&autostart=true&availablequality=both&bordercolor=#2E2D2E&forecolor=#E3E3E3&backcolor=#2E2D2E&darkcolor=#FF0000&lightcolor=#C20202" /><param name="quality" value="high" /><param name="scriptAccess" value="always" /><embed src="http://api.zippyshare.com/api/player.swf?file=5053686&server=52&baseurl=http://api.zippyshare.com/api/&flashid=zs_player5053686&autostart=true&availablequality=both&bordercolor=#2E2D2E&forecolor=#E3E3E3&backcolor=#2E2D2E&darkcolor=#FF0000&lightcolor=#C20202" width="100%" height="80" quality="high" pluginspage="http://www.adobe.com/go/getflashplayer" type="application/x-shockwave-flash" scriptaccess="always" name="5053686_191015569"></embed></object>

</div>

Seria tipo assim certo ? , mais mesmo assim só abre um

[LeoO_DF 22]

O Primeiro código que mandei está incorreto, use esse:

$(document).ready(function() {   
	$("div#Titulo").click(function(event){ 
        var ConteudoID = $(this).attr("class"); 
		if($("#Conteudo-"+ConteudoID).is(":visible"))
		{
			$("#Conteudo-"+ConteudoID).fadeOut('fast');
		}
		else
		{
			$("#Conteudo-"+ConteudoID).fadeIn('fast');
		}
	});
});

<div id="Titulo" class="1">1</div>
<div id="Conteudo-1" style="display:none;">aaaaaaa</div>
<div id="Titulo" class="2">2</div>
<div id="Conteudo-2" style="display:none;">aaaaaaa</div>
<div id="Titulo" class="3">3</div>
<div id="Conteudo-3" style="display:none;">aaaaaaa</div>

esse eu já testei aqui e está funfando em todos, Se for usar <p class="Titulo"></p> em vez de div#Titulo na função use p#Titulo em vez de div#Titulo

[rauan 0]

 

Não sei se é proibido links externos , se for me desculpa , mais to querendo um tipo assim http://redmusic.pl