Abrir/Fechar elementos usando Javascript e CSS

Quarta-feira, 14 de Março de 2007

Vou começar hoje a publicar uma série de artigos com exemplos de código que costumo usar para elaborar vários tipos de layout (HTML+CSS) e efeitos em Javascript ou AJAX (algo que estou a começar a aprender a mexer este ano).

Estes exemplos irão contemplar temas como: criação de 2 ou mais colunas usando CSS, como criar menus usando uma lista de itens, como posicionar elementos num local exacto numa página, bem como alguns efeitos simples em Javascript. Estou aberto a sugestões

Hoje começo com o tema:

Abrir/Fechar elementos usando Javascript e CSS

Basicamente, através de um pequeno código Javascript e uma linha de CSS conseguimos fazer com que um determinado elemento se abra ou feche mediante um clique. Por exemplo, podemos querer ter alguma informação na página que é acedida apenas quando o utilizador clica num link. Isto faz com que essa informação apareça sem ter que recarregar a página (no fundo, a informação está lá, mas está escondida).

Para tal, basta termos o seguinte código Javascript e colocá-lo na nossa página ou num ficheiro externo:

1. function toggle(obj) {
2. var el = document.getElementById(obj);
3. if ( el.style.display != 'none' ) {
4. el.style.display = 'none';
5. }
6. else {
7. el.style.display = '';
8. }
9. }

No HTML teremos o link para abrir/fechar a caixa de informação (nota, é necessário indicar que “id” é que vamos abrir/fechar):

1. <a href="#" onclick="toggle('maisinfo');">Mais Informação</a>

E finalmente, a div com a “id” que será aberta ou fechada usando o link anterior:

1. <div id="maisinfo" style="display:none">Conteúdos que ficarão escondidos</div>

O CSS usado nesta div indica que este elemento está escondido quando se abrir a página. Se quiserem que o elemento apareça aberto, basta remover a instrução do style.

Ver exemplo 1

E para quem não tem o javascript activado no browser?

Pegando no Exemplo 1, vamos fazer com que o link “Mais Informação” apenas apareça para os browsers que tiverem o Javascript activado. Sendo assim, alteramos o link para:

1. <script>
2. if (true) {
3. document.write('<p><a href="#" onclick="toggle(\'maisinfo\');">Mais Informação</a></p>');
4. }
5. </script>
6. <noscript><p class="erro">O Javascript está desactivado no seu browser.</p></noscript>

Ou seja, caso não exista nenhuma versão de Javascript, apenas mostramos o texto que está entre as tags noscript.
Esta versão ainda não está perfeita porque falta dizer ao browser que, se não houver javascript, então os conteúdos devem ter um display:block, caso contrário, um utilizador com CSS activo e Javascript desactivo, não irá ver o texto.

Ver exemplo 2

Fazer a mesma coisa, mas com efeitos animados (Script.aculo.us + Prototype)

Para que possamos animar a abertura/fecho do elemento, necessitamos de usar uma “library” de efeitos. Neste exemplo, vamos usar a Script.aculo.us.
A Scrip.taculo.us é uma biblioteca de efeitos em Javascript que pode ser facilmente usada no nosso site, sem ser necessário grandes conhecimentos de programação. Basta fazer download e colocar numa pasta do site.

No cabeçalho da página, temos que chamar os efeitos, assim:

1. <script type="text/javascript" src="/lib/js/prototype.js"></script>
<script type="text/javascript" src="/lib/js/scriptaculous.js"></script>

Nota: Iremos usar esta biblioteca em vez do javascript usado no Exemplo 1.

Depois basta alterar o link que também tinhamos definido para algo como:

1. <a href="#" onclick="Effect.toggle('maisinfo','slide'); return false;">

Em que: “maisinfo” é o nome da div a abrir/fechar e “slide” é o efeito. Podemos usar outros efeitos, tais como “blind” ou “appear”.

Ver exemplo 3

Separação do Javascript dos conteúdos

Da mesma forma que podemos separar a apresentação (CSS) dos conteúdos (HTML), também é possível separar os efeitos e outras animações (Javascript) para fora do código HTML.
(Obrigado ao Sérgio Nunes pela dica!)

Fiz um pequeno teste com base no Exemplo 1, em que modifiquei o HTML, removendo todo o Javascript e colocando as acções à parte no Javascript.

Ver exemplo 4

E fazendo a mesma coisa usando jQuery

Graças ao José Carlos, temos um exemplo que consegue fazer tudo o que os anteriores fazem, e melhor. Através do jQuery, uma biblioteca de Javascript, é possível, com pouco código, abrir ou fechar um elemento usando animação e, ao mesmo tempo, ter em conta os utilizadores que não têm javascript activado. Além de tudo isto, faz também a separação do Javascript para um ficheiro externo, o que nos deixa com um HTML limpo e sem mais nenhuma tag que não seja HTML puro.

Ver exemplo 5

Definitivamente, esta é a melhor solução para este tipo de situações.

Outros métodos

O Dustin Diaz mostra 7 maneiras diferentes de abrir/fechar (toggle) um elemento usando Javascript. Estes exemplos fazem basicamente a mesma coisa mostrada no Exemplo 1, mas usando várias metodologias diferentes.

Conclusão

Usando um pequeno pedaço de código é possível tornar o nosso site um pouco mais interactivo. É claro que este tipo de elementos e as animações não devem ser usadas em demasia, mas sim, tendo em conta um propósito e um objectivo bem definidos que facilitem de alguma forma a navegabilidade do site.
Por exemplo, esta função seria bastante útil numa listagem de itens com um link para “ver mais informações” sobre cada um deles. Desta forma, o utilizador não seria bombardeado com tanta informação de início e ao mesmo tempo teria a liberdade de poder abrir a informação detalhada de cada elemento sem ter que recarregar a página inteira nem distrair-se com outra informação que não é relevante na altura.

Nota: Este artigo é apenas uma forma de eu ir testando algumas coisas em Javascript. Uma vez que só agora estou a aprender a usar esta linguagem (ainda só consigo usar coisas que outros já desenvolveram) é normal que nos comentários apareçam pessoas mais entendidas que eu e que dêem melhores sugestões/soluções para estes problemas. De qualquer das formas, a discussão do tema ajudará sempre a que eu (e outros) possamos aprender um pouco mais. Talvez nos próximos artigos me fique exclusivamente pelo HTML+CSS e deixe o javascript um pouco de lado até perceber minimamente da coisa