Criando um box expansível com CSS e JS

Postado em November 29th, 2007 | Algo sobre CSS, Javascript, Tutoriais

Hoje vou mostrar um nesse tutorial, um pequeno truque que muitas vezes quebra um galhão.

Se trata de um box, que exibe apenas uma parte do conteúdo, e quando é clicado, expande mostrando o conteúdo todo. Veja oque vamos fazer Lá vamos nós.

Todo o segredo está no seguinte código

<div class="box_fechado" onClick="javascript: this.className = ( this.className == 'box_aberto' ) ?
'box_fechado' : 'box_aberto';"> </div>

Esse javascript, faz com que a classe aplicada na div mude, de “box_fechado” para “box_aberto”, ou seja, o resto é CSS.
Criaremos duas classes, para os dois estados do box.


div.box_fechado,div.box_aberto{cursor:pointer;}
div.box_fechado{height:18px;overflow:hidden;}
div.box_aberto{overflow:none;}

O overflow:hidden, e o height faz com que o box fique travado em um tamanho definido, e ao clicar, o overflow fica “none” mostrando todo o conteúdo, ja que o height também some.

Isso é só o raciocínio inicial, aproveitando a lógica, pode-se também trabalhar com cores, backgrounds, e outras formatações, é só usar a imaginação.

Até a próxima

Posts Relacionados

5 Comentários para “Criando um box expansível com CSS e JS”

  1. Rodrigo Pessoa disse:
    December 3rd, 2007 at 23:21

    E aew brother!!
    Tava procurando justamente como fazer isso ontem!!
    Caiu como luva esse post!
    vlw!

  2. Bruna disse:
    March 5th, 2008 at 18:42

    Olá Rodrigo,

    É possível fazer esse box só que com um link para fechá-lo, ao invés da caixa toda ser um link?

    Obrigada!

    Abs,
    Bruna.

  3. Pedro Garcia disse:
    April 9th, 2008 at 15:08

    Bruna, creio que isso vai resolver o seu problema:

    Clique para expandir

    Aí você completa o código pro link mudar para “Clique para comprimir” quando o box estiver aberto. ;)

    Abraço,
    Pedro

  4. Pedro disse:
    April 9th, 2008 at 15:19

    Ih! O código foi interpretado oO Vou tentar escrever de uma maneira que dê pra ler:

    \
    \
    function box(){
    if(box.className == ‘box_aberto’)
    box.className=’box_fechado’
    link.innerHTML=’Clique para expandir’
    else
    box.className=’box_aberto’
    link.innerHTML=’Clique para comprimir’
    }
    \
    \

    \

    \\ Clique para expandir\\

    \

  5. Rodrigo Medeiros disse:
    April 9th, 2008 at 15:28

    Da uma pequisada por JQuery, existem umas bibliotecas de códigos Javascript que ja tem funções como estas. Serve para isso e para muitas outras coisas.

Solte o Verbo