Programação

Div Expansível com jQuery- Como criar

Salve terráqueos! Mais um tutorial ensinando em poucos passos como criar uma div expansivel. Mas para que serve? Muito usual quando se tem um conteúdo maior que o espaço disponível no layout, assim criamos uma div expansível que quando clicada, seu tamanho expande, exibindo assim o restante do conteúdo.

Exemplo

Criando a div expansivel com jQuery

Vamos montar a marcação HTML da nossa div expansivel, criando uma div com id=full e dentro dessa div, criaremos outra div com id=mini e vamos criar o atributo estado=fechado e por último inserimos uma class=container, é muito importante ter o atributo e a classe, pois servirá de controle pro script final e então o nosso código HTML ficará mais ou menos assim.

<div class="content" id="full">
<div class="container" id="mini" estado="fechado">
Aqui vai todo o conteúdo da sua div expansível</div>
</div>

Bom, agora que criamos as div´s dos conteúdos, vamos criar um botão com id=btnAbrir e com class=btnAbrir, para que os visitantes possam abrir e ver o conteúdo da div expansivel, para isso, no código acima, antes de fechar a div com id-full, vamos adicionar a seguinte linha.

<div class="btnAbrir" id="btnAbrir"></div>

O HTML da div expansivel deve ficar mais ou menos assim.

<div class="content" id="full">
<div class="container" id="mini">
Aqui vai todo o conteúdo da sua div expansivel</div>
<div class="btnAbrir" id="btnAbrir"></div>
</div>

Agora vamos criar o CSS, que vai controlar boa parte das ações da div, vou detalhar um pouco melhor.

#full – Controla a div maior.
.container – Controla o conteúdo que é fixo na div, ou seja, sempre será visível.
.containerAberto – Controla o conteúdo todo, é adicionado via script depois que o usuário clicar no botão abrir.
.btnAbrir – Nome auto explicativo, controla o botão abrir.
.btnFechar – Nome auto explicativo, controla o botão fechar, essa classe também é adicionada via script depois que o usuário clicar no botão abrir.

No meu exemplo de div expansivel, o CSS ficou da seguinte maneira.

#full {
	width:600px;
	float:left;
	background:#EEE;
	position:absolute;
}
.container {
    color: #070F14;
    float: left;
    font-family: 'Roboto Condensed';
    font-weight: 300;
    height: 80px;
    line-height: 1.35429;
    overflow: hidden;
    padding: 0 20px;
    text-align: justify;
    width: 560px;
}
.containerAberto {
    color: #070F14;
    float: left;
    font-family: 'Roboto Condensed';
    font-weight: 300;
    height: 100%;
    line-height: 1.35429;
    overflow: hidden;
    text-align: justify;
    width: 560px;
}
.btnAbrir {
    background: url("https://cdn2.iconfinder.com/data/icons/picol-vector/32/arrow_sans_down-24.png") no-repeat scroll 0 0 transparent;
    bottom: 10px !important;
    cursor: pointer;
    float: right;
    height: 20px;
    margin-left: 453px;
    text-align: center;
    width: 25px;
    z-index: 99999;
}
.btnFechar {
    background: url("https://cdn2.iconfinder.com/data/icons/picol-vector/32/arrow_sans_up-24.png") no-repeat scroll 0 0 transparent;
    bottom: 10px !important;
    cursor: pointer;
    float: right;
    height: 20px;
    margin-left: 453px;
    text-align: center;
    width: 25px;
    z-index: 99999;
}

Pronto, com o CSS criado, agora vamos para a mágica final do código, resumindo, vamos criar um código que ao clicar no botão abrir, adicionará algumas classes de CSS e quando o botão fechar for clicado, removerá algumas classes, então no exemplo, eu fiz o JS assim.

<script type="text/javascript">// <![CDATA[
	  var $f = jQuery.noConflict();
     // Use jQuery via $f(...)
     $f(document).ready(function(){
		$f('#btnAbrir').bind('click', function(){
			if ($f(this).parents("#full").children("#mini").attr('estado') == 'fechado'){
				$f(this).parents("#full").children("#mini").addClass('containerAberto');				
				$f(this).parents("#full").children("#btnAbrir").addClass('btnFechar')
				$f(this).parents("#full").children("#mini").attr('estado','aberto');
			}
			else
			{				
				$f(this).parents("#full").children("#mini").removeClass('container containerAberto').addClass('container');
				$f(this).parents("#full").children("#btnAbrir").removeClass('btnFechar');
				$f(this).parents("#full").children("#mini").attr('estado', 'fechado');
			}
		})
	})
// ]]></script>

Caso você ainda não esteja chamando a biblioteca jQuery no seu site, você pode usar a biblioteca do Google, para isso basta adicionar a linha abaixo antes de fechar a tag < /head > no seu código.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

Não se esqueça que ao alterar o nome de qualquer id ou classe do CSS, você também deve alterar a nomenclatura no JS, senão o código não funcionará corretamente.

Pronto, sua div expansivel foi criada, achou fácil? Dúvidas, comentem.

Se o post te ajudou curte a página, não custa nada e me incentiva a continuar escrevendo.
Posts recomendados
Comentários

    19 respostas para Div Expansível com jQuery- Como criar

    1. adam escreveu em 25 de setembro de 2013

      amigo, esse seu exemplo é otimo!
      mais nao tem efeito ao clicar na imagem!
      é possivel vc colocar um efeito de slide quando clicar?
      sou iniciante e nao sei muito como funciona :/
      obrigado

    2. Marcos escreveu em 25 de fevereiro de 2014

      Muito bom! mas eu preciso saber se Este exemplo serve de base para esconder por exemplo o conteúdo de um like box ou seja clicando no botão do face apareceria um balão com o conteúdo do like box???

    3. Qcabeca escreveu em 25 de fevereiro de 2014

      Rapaz, eu acho que no seu caso, ficaria melhor esse exemplo aqui. Mas ainda não fiz o post dele, acabei de criar, e se quiser veja o código fonte.
      Qualquer dúvida me avise,
      Abs

    4. Marcos escreveu em 27 de fevereiro de 2014

      Obrigado por responder. Vou trabalhar nessa base, então. Valeu!!!

    5. Qcabeca escreveu em 28 de fevereiro de 2014

      Ok Marcos, sucesso por ae.

    6. Elton escreveu em 26 de março de 2014

      Olá. Me ajudou muito este material. Entretanto, no meu site é preciso clicar duas vezes na imagem para a div ficar expansível. Depois disso ele abre normalmente com 1 clique apenas. Saberia me informar o motivo disso? Obrigado.

    7. Qcabeca escreveu em 26 de março de 2014

      Olá Elton, que bom que foi útil pra você. Cola o código no pastebin e me envia o link pra eu dar uma olhada.

    8. Elton escreveu em 26 de março de 2014

      Olá. Obrigado pelo retorno.

      Nunca usei o pastebin, mas acho que consegui me virar rsrs.
      Os códigos css e script deixei assim no meu site:

      http://pastebin.com/CYUMUkPW

      As divs criei assim:

      http://pastebin.com/M2rgT7S5

      Novamente muito obrigado.

    9. Qcabeca escreveu em 26 de março de 2014

      Elton, deu certo o pastebin sim, hahaha.

      Seguinte, acho que eu tinha comido barriga, no seu segundo código do pastebin, na linha 4, depois de

      id ="mini"

      , você deve adicionar o seguinte código:

      estado="fechado"

      Já atualizei meu tutorial. Espero que dê certo. Qualquer coisa, me avise.

    10. Elton escreveu em 26 de março de 2014

      Muito obrigado. Deu certo. Agradeço muito pela sua dedicação e por disponibilizar este material excelente. Sucesso sempre pra você :D

    11. Elton escreveu em 26 de março de 2014

      Olá. Agradeci mais cedo, mas tenho dúvida se ficou registrado meu comentário. Então vou enviar novamente: Obrigado pela ajuda. Agora deu tudo certo. Sou grato pela dedicação e excelente conteúdo. Abraço.

    12. Qcabeca escreveu em 27 de março de 2014

      Obrigado pelo Feedback Elton, sucesso. Abs

    13. Qcabeca escreveu em 27 de março de 2014

      Eu que não entrei mais no blog, então não tinha sido aprovado. Obrigado mais uma vez. Abs

    14. Ueslei escreveu em 13 de maio de 2014

      exemplo perfeito, funcionalidade exata, mas e seu eu precisar de mais de uma div na mesma página como neste exemplo: http://www.kumhopneus.com.br/index.php/novidades/noticias

      Obrigado.;

    15. Qcabeca escreveu em 16 de maio de 2014

      Ueslei, conseguiu resolver essa pendência já?

    16. Naiara Geisler escreveu em 18 de maio de 2014

      Olá, muito bom o seu post!
      Por que ele funciona apenas clicando 2x?
      como faço Pra replicar esse código em várias div’s?(como no exemplo abaixo)
      http://www.flaviasguario.com.br/teste/depoimentos_teste.html

      Aguardo resposta
      Obrigada

    17. Qcabeca escreveu em 20 de maio de 2014

      Olá Naiara, você fez via código do site, ou usou o código do GitHub ou algo assim?

    18. Naiara escreveu em 21 de maio de 2014

      Na verdade, estou usando o bootstrap.
      Mas consegui arrumar agora.
      Tive que inserir uma tag estado=”fechado” em cada div, porque o default desse estado era “null”.

      Obrigada mesmo assim

    19. Qcabeca escreveu em 25 de maio de 2014

      Que bom que deu certo Naiara, mas deixa eu te perguntar, somente o estado=fechado na div id=mini não resolveu?

    Envie seu comentário.

    Seu email não será publicado