Ir para conteúdo

Arquivado

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

Kelven

[Resolvido] Exiber metade da div

Por , em Javascript

Recommended Posts

Kelven    1

Kelven
Postado

E ai galera beleza,

ou queria fazer um efeito semelhante aquele do youtube quando você ta vendo um video la em baixo nas informações do video metade da div fica oculta e quando você clica em exibir mais a div aparece toda como num evento slide, pois é tipo eu fiz a div e fiz o botão de clicar, agora falta o código em jquery ou ajax que é o que eu to usando, alguém pode me ajudar com isso como é que eu faço esse código, a class e id da div que vai ser exibida é "conteudo" e a class e id do botão é "exibir".

 

Como eu faço isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

para exibir com slide no jQuery, basta usar um .slideDown()

http://api.jquery.com/slideDown/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kelven    1

Kelven
Postado

william usar o slide eu ja sabia, o negocio é tipo porque eu quero que o seguinte olha a imagem:

243ngnd.jpg

 

Ta vendo a parte marcada em vermelho, é como se parte da div estivesse sendo exibida e depois quando a pessoa clica em exibir mais exibe o resto da div com o slideDown, o negocio é que quando eu faço ele oculta toda a div e depois exibe ela com o slide quando eu clico no link, o que eu quero é que ele oculte somente tipo uns 60% da parte de baixo da div, você sabe como fazer isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado
você sabe como fazer isso?

eu tenho "a minha forma" de fazer.

 

<html>
<head>
<style type="text/css">
* { margin: 0; padding: 0; }
p { margin-bottom: 10px; }
.content { margin: 0 auto; width: 500px; }
#panel { position: relative; width: 500px; margin: 0 auto; }
#content {

}
.hidden { height: 100px; overflow: hidden; }
#toggle { width: 488px; height: 20px;
background: #fff; border: 1px solid #ccc; padding: 5px; cursor: pointer;
text-align: center;

}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#toggle').click(function(){
	jQuery('#panel').toggleClass('hidden');							  
});	
});
</script>
</head>
<body>
<div id="panel" class="hidden content">
	<div id="content">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed gravida dolor. Fusce aliquam, urna sit amet 
           luctus adipiscing, massa sem venenatis dui, quis accumsan mi orci eu orci. Mauris nec massa non mi iaculis tincidunt 
           eget a lectus. Curabitur suscipit, magna vel laoreet volutpat, sem mauris placerat risus, nec pretium mauris orci non dui.</p>

		<p>Cras in massa dapibus leo tincidunt molestie nec ut sem. Aenean sit amet ipsum risus. Class aptent taciti sociosqu 
           ad litora torquent per conubia nostra, per inceptos himenaeos. Cras vitae erat at magna volutpat consequat ut a justo. 
           Mauris dapibus dolor at orci placerat congue. Praesent facilisis sodales molestie. Quisque eget lacus eget justo aliquet
            sagittis. Duis sed elit id dui semper feugiat. Vivamus risus magna, facilisis at hendrerit sit amet, accumsan nec felis.</p>

		<p>Nunc massa tellus, fringilla ut tincidunt consequat, ultricies eget nunc. </p>
        </div><!-- /content -->
</div><!-- /panel -->
<div id="toggle" class="content">toggle</div>
</body>
</html>

note que toda a técnica está no CSS.

o js é ridículo.

 

:lol:

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