Criar uma Caixa Expansível - Mootools

Escrito por Gonçalo Martins

Caixa Expansível

Como criar aquelas "caixas" presentes em alguns websites que quando clicamos no topo delas, se retraem ou expandem, e todo o conteúdo abaixo destas se adapta às novas dimensões do site?

Isto pode ser feito de algumas maneiras diferentes (que irei abordar de futuro), no entanto no exemplo dado abaixo vou utilizar Mootools, para criar este efeito.

Passo 1: HTML

<h2><span>
<a href="#" id="toggle">Secção</a>
</span></h2>
<div id="section">
<div>

</div>
</div>

id="toggle" e id="section" serão os "identificadores" para o Mootools.

Passo 2: Adicionar o efeito Toogle do Mootools

Adicione um link para a Mootools framework antes de </head> no seu site.

e abaixo da linha anterior adicione o seguinte código:

E é tudo...

^{Update: Nova versão da caixa expansivel com indicador de estado!!}

Download dos ficheiros referidos no artigo:
caixaexp.rar	[Um exemplo do artigo acima [css, html, mootools, script]]	39 Kb

PATROCINADORES

ARTIGOS RELACIONADOS

Trackback(0)

TrackBack URI for this entry



Higor Morais Dezembro 29, 2008	Como eu faço para adicionar essa mesma função em mais de um elemento?Por pelo que vi pode-se aplicar em elementos de uma mesma classe, mas não com o mesmo ID, pois os ids têm que ser diferentes.

Escreva o seu Comentario

Gonçalo Martins

Freelancer, Fan de Desing, Praticante KickBoxing e Blogger nos tempos livres.

Ferramentas WebLouca: JSPacker | CSSPacker

Têm conhecimentos? Escreva um guest post! +info

Procuro pessoas que possam escrever artigos exclusivos, de forma a variar o estilo do conteúdo apresentado.
Não existe recompensa monetária, mas escrever um artigo de qualidade no WebLouca é uma excelente forma de:

- Se promover na Comunidade;
- Promover o seu blog, website ou negocio;
- Ajudar outros programadores e Designers;

Sinta-se livre para me contactar e expor as suas ideias.

Patrocinadores do Site

Subscrever Feed

Tens Talento?

^{- fechar caixa contacto -}

Considera escrever um guest post no weblouca!

Procuro pessoas que possam escrever artigos exclusivos, de forma a variar o estilo do conteudo apresentado.
Não existe recompensa monetaria, mas escrever um artigo de qualidade no WebLouca é uma exelente forma de:

- Se promover na Comunidade;
- Promover o seu blog, website ou negocio;
- Ajudar outros programadores e Designers;

Contacte-me e exponha-me as suas ideias.

^{- caixa contacto -}