IvoGomes.com

Usabilidade, Acessibilidade & User Experience

Voltar ao início

Abrir/Fechar elementos usando Javascript e CSS

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 :)


62 Comentários

Comente este artigo!

  1. Cesar Oliveira

    Olá Ivo, muitos parabéns,

    Aqui está um post verdadeiramente util e interessante.

    Continua nessa onda que vais bem.

    Um abraço de Guimarães
    César Oliveira
    http://www.profissionalweb.net/blog/
    http://www.profissionalweb.net/cursos/
    http://www.profissionalweb.net/gestdoc/

    PS: Tu estás em que cidade ?

  2. Muniz

    Está aí uma dica que merecia um pouco de material português :)
    Ótimo!

  3. José Carlos

    Boa dica.

    Penso que se deve evitar a utilização de links com o # como destino.
    Podes fazer o seguinte: se a pessoa tiver o javascript activo, a informação adiccional aparece normalmente, logo, não é necessário o link.
    Se a pessoa tiver o javascript activo, podes criar o link via javascript.
    Para evitar a utilização dos eventos inline, pode-se atribuir ao link criado uma id, ou uma class, e fazer o seguinte (utilizando a scriptaculous ou a jquery é simples):
    “raptar” a funcionalidade de clique do link e fazer que, ao clicar, em vez de ter o comportamento normal seguir o link), execute uma função, neste caso a toggle().
    Logo sou capaz de ter mais tempo para exemplificar.

    Fica a sugestão.

  4. José Carlos

    no inicio, onde disse:
    : se a pessoa tiver o javascript activo, a informação adiccional aparece normalmente, logo, não é necessário o link.

    deve ler-se:
    : se a pessoa tiver o javascript desactivo, a informação adiccional aparece normalmente, logo, não é necessário o link..

    Peço desculpa.

  5. Ivo Gomes

    @José Carlos: Obrigado pela dica. Por acaso já tinha pensado nisso dos links a apontar para “#”, mas não me ocorreu nenhuma forma de dar a volta. Quanto às sugestões que dás, infelizmente só comecei agora a aprender Javascript, por isso ainda não estou apto para as implementar de cabeça :)
    Vou pesquisar um pouco e depois meto aqui a solução (ou faço um novo post só sobre isso).

  6. Jorge Laranjo

    O José Carlos tem razão.
    E é importante que o site não deixe de ser acessível só por usar Ajax.

    E já experimentaste a jQuery? http://jquery.com/

  7. Sérgio Nunes

    Sugiro que, em vez de usar JS directamente nos código HTML, se use JS não intrusivo. Ver por exemplo:

    http://alistapart.com/articles/behavioralseparation

    As vantagens são grandes e estão associadas à separação da estrutura-estilo-dinâmica das páginas web.

  8. Ivo Gomes

    @Jorge Laranjo: Vou ver a jQuery. Já me falaram muito bem disso.

    @Sérgio Nunes: Obrigado pelo link. Não sabia que dava para fazer essa separação, tal como a do CSS/HTML. Estive a experimentar, mas ainda não percebo muito de Javascript para conseguir fazer com que algo funcione…

    Quanto à acessibilidade, já tenho uma versão que só mostra o link se o browser tiver o javascript activado. Agora só me falta dizer que a div tem que ter o display:block se não houver javascript (para que o texto fique visível).

  9. Estevão Lucas

    Olá Ivo,
    Tudo bem?

    Alguns exemplos você utiliza o Prototype + Scriptaculous (2 frameworks). Recomendo, por varios fatores, jQuery, um fremework que faz o que o Prototype e o Scriptaculous faz junto, e quando não faz, existe um Plugin que o faça.
    jQuery tem uma comunidade de desenvolvedores muito grande, varios plugins…! É uma maravilhar.
    So pra exemplificar a simplicidade, abaixo vai o código com a mesma funcionalidade que você fez:

    $( "p > a" ).click( function()
    {
    $( "#maisinfor" ).toggle();
    });

    Não-obstrutivo, muito menor, e com somente um framework!
    Ah…trabalha com seletores de CSS3…nossa!

    Abraços

  10. José Carlos

    Também concordo que a jQuery é das mais interessantes, quer pelo tamnho reduzido, quer pelas funcionalidades.
    Para não alongar o post, e como era preciso código, deixo esta página de exemplo para aquilo que disse atrás, a criação, via javascript do link, recorrendo à jQuery.

  11. André

    Grande ivo!
    Muito boa a iniciativa de publicar artigos relacionados a desenvolvimento. Tenho certeza que será útil para os visitantes do seu blog.

    Meu conhecimento em JS é muito pequeno. Eis aqui a oportunidade de aprender.

    Parabéns pelo site/blog.

  12. Ivo Gomes

    Esse exemplo do jQuery deixou-me embasbacado :D

    Brutal. Extremamente simples quando comparado com outros métodos que andei a pesquisar.

  13. Gabriel

    Cara, muito bom o post, mas pintou uma duvida: sou leigo no assunto e queria saber como faço para ao clicar em 1, fechas as demais abertas… trocando em miudos: sempre deixar no maximo 1 aberta…

  14. Euclides

    Oi pessoal eu estou aprendendo java script e enfrento ainda muitas deficuldades, tentei seguir todos os passos para abrire fechar usando o JS, mas nao deu em nada, eu uso o dreaweaver e pois os codico assim:

    Untitled Document

    Mais Informação
    function toggle(obj) {
    var el = document.getElementById(obj);
    if ( el.style.display != ‘none’ ) {
    el.style.display = ‘none';
    }
    else {
    el.style.display = ”;
    }
    }
    Conteúdos que ficarão escondidos

    //- ->

    1. Objetivo
     
     

    Ajude-me por favor

  15. Ivo Gomes

    Euclides, o Javascript não pode ficar no meio do HTML. Abra as páginas com os meus exemplos e veja como foi colocado o código.

    Gabriel, provavelmente para isso terá que ser definido mais algum código para deixar sempre um bloco aberto, mas neste momento também ainda não sei como o fazer (ainda não tive tempo de aprofundar mais os meus conhecimentos de JavaScript).

  16. Euclides

    Alo ivo , eu estou aprendendo java script agora , se pode – se indicar um manual ou coisa parecida para eu aprefessoar os meus conhecimentos agradeceria, e um dos males que eu enfrento e que estou num pais de africa e acesso a livros de treinamento web e ferramentas web e muito deficil , se podem se ajudar me agradeceria imenso. eu de sul de africa em mocambique. foi…

  17. José Carlos

    @Euclides: posso recomendar eu um? Se sim, um excelente livro de DOM Scripting é o DOM Scripting – Web DEsign with Javascript and the Document Object Model, do Jeremy Keith.
    Tem uma introdução bastante boa ao Javascript e depois avança para o DOM Scripting, sempre com exemplos e conselhos.

  18. Ivo Gomes

    Eu comprei o “Learning Javascript” há uns dois meses mas ainda não tive tempo de começar a ler.

  19. Ivo Gomes

    E finalmente tive a oportunidade de fazer uma pequena página usando o JQuery :)

    Podem ver aqui: http://anedotas.numsitedejeito.com/faq

  20. Danilo Debiazi

    Achei muito interessante este artigo, me ajudou muito de fato. Mas neste código surgiu o seguinte problema:

    Mais Informação

    O href fazia com que no clique o site fosse para o topo, resolvi este problema simplesmente tirando o href inteiro.

    Eu queria saber se tem como colocar img do lado da sessao, uma img com seta para baixo ou seta para direita, vai depende do estado. Como que faz isso ?

  21. Elfrancio Granjense

    Finalmente encontrei o que procurava neste blog, obrigadão!

  22. Ademir Bastiani

    Ola , estou tentando fazer um exemplo, mas da erro effect não está defenido onde estou erando.

  23. TIAGO...BELOM

  24. Cayo Medeiros aka. yogodoshi

    Parabéns pelo artigo.
    Muito bem explicado!

    Ia fazer um post como esse no meu blog mas agora acho que não é mais necessário, indicarei o seu link. ^^

    Abraços!

  25. Lipeh

    Gostei, uma post que realmente presta..
    amigo queria uma ajudinha sua..
    to cum um pekeno problema..
    ve se entende…
    tenho um arkivo index.htm dentro de uma pasta chamada 1.
    E tenho uma pagina chamada comandos.htm fora da pasta 1, ou seja, no desktop.
    Supondo entao:
    Desktop:
    Desktop/comandos.htm
    Desktop/1/index.htm
    Queria saber se existe alguma forma de eu fazer um link dentro da minha index.htm ir para a pagina que esta fora da pasta entende??
    eu sei que poderia usar o link certinho que da certo, colocar:
    C:….desktop\comandos.htm
    so que eu vou colocar esta pagina(index.htm) em um cd para ser a autorun dele…
    logo, o meu driver aki em casa é E;
    mais tem locais que ele é d; f; g;
    e ai nao vai dar certo…
    tem como??
    valew espero respostas…entra no mew blog e ai fala se tem ou nao ok?
    flwss

    http://dominiohacker.blogspot.com

  26. Ivo Gomes

    Podes fazer os links relativos em vez de os fazeres absolutos. Exemplo: “1/index.php” em vez de “Desktop/1/index.htm”. Para fazer um link para uma pasta anterior, basta fazer “../comandos.html”

  27. Carlos Bonaparte

    Olá,

    realmente, este post sem dúvida está interessante, até porque encontrei exatamente aquilo que queria para o meu site.. um menu onde possa mostrar certas coisas só quando o utilizador clicar nelas.

    Falta a parte de trocar um conteúdo por outro, quando o utilizador clica, mas isso são pormenores.

    Eu tenho é uma dúvida.
    Em relação ao último comentário sobre os caminhos…

    Eu tenho um ficheiro dentro de uma pasta, vamos imaginar index.htm. e tenho outro na pasta anterior.
    Então para passar do Index para o ficheiro da pasta anterior eu faço ../. Até aí tudo certo.
    Mas tem jeito de eu passar para a pasta seguinte?
    Imaginem.
    Eu tenho 5 pastas. Todas elas contêm um ficheiro com um nome idêntico: noticias.htm
    Tem jeito de eu fazer um link do ficheiro index para o ficheiro noticias, independente da past?
    Ou seja, sem que eu especifique para que pasta está a ir?
    A ideia é esta.

    3 pastas dentro do mesmo nível: Menus, Belenenses e Maritimo
    Dentro das pastas Belenenses e Maritimo existe um ficheiro dentro de cada pasta com o nome Noticias.htm
    Na pasta menus está o ficheiro 1liga.htm

    A ideia é criar um menu que possa colocar numa iframe, sem precisar de fazer um menu para cada clube. Bastaria com fazer um menu para todos os clubes da primeira divisão, segunda, terceira, distritais.
    O que supostamente aconteceria era que na página principal da pasta Belenenses, Belenenses.htm e da pasta Maritimo, Maritimo.htm, teria uma iframe direcionando para este menu, algo do estilo
    iframe src=”../Menus/1liga.htm”
    especificações à parte.

    Até aí tudo certo… agora, como é que eu posso dizer ao HTML para ele me apresentar o ficheiro “noticias.htm” dentro daquela pasta, no ficheiro 1liga.htm?

    Isso é posível de fazer?

    Abraços a todos.

  28. Ivo Gomes

    Olá Carlos.
    Em relação à sua dúvida, quando cria um link, tem de colocar sempre o endereço correcto para o ficheiro. Por isso, se o ficheiro está na pasta /ABCD/noticias.html, terá que usar essa informação para o link.
    A única forma de não ter que escrever manualmente o nome da pasta seria usar um pouco de programação para identificar o nome do menu e substituir automaticamente pelo nome da pasta, mas sugiro que siga pelo caminho mais fácil, que é alterar o menu manualmente.

  29. Carlos Bonaparte

    Olá, obrigado…
    A questão é que, tendo em conta que o objetivo final é ter aproximadamente 2000 clubes, alterar no final da temporada 2000 menus… é muita coisa;

    eu já soube entretanto que isto se tem de fazer com PHP. Eu estou num curso universitário, onde apesar de não darem essa matéria, dão PHP, mas não me ajudam por aqui…

    Em Javascript creio que isso não é possível de fazer, só mesmo em PHP… se houver alguém que possa dar uma dica ao meu problema…

    Obrigado,

    Carlos Bonaparte

  30. Carlos Fernando

    Grande post.
    Mas, estou com uma dificuldade.
    É possível abrir o script, a div, utilizando o php.
    Gostaria de abrir a div dentro de um if do PHP.

    Obrigado.

  31. José Coelho

    Olá ivo, boa tarde. Descobri o seu site que considero bastante útil. Tenho a dizer que não entendo nada nem de Javascript nem de CSS, mas gostaria imenso de ter um efeito no meu blog e pedia-lhe ajuda, nesse sentido. Gostaria de criar um efeito colorido nos links ao passar com o rato, o que em inglês se chama Flashing Links. Aqui nesta página japonesa pode ver o efeito que pretendo: http://celluloide.tistory.com/category/Future%20pop/EBM
    Tenho um blog no Sapo que funciona em CSS, como posso adicionar este efeito colorido no meu blog? Pode-me ajudar? Obrigado pela atenção. Um abraço. José

  32. Ivo Gomes

    Olá José.
    Não sei como fazer esse efeito, mas sugiro um muito mais simples, que muda apenas a cor do link ao passar com o rato por cima. O que me mostrou parece ser um pouco irritante se o site tiver muitos links e todos eles fizerem esse efeito ao passar com o rato. Além disso, seria necessário criar algo em JavaScript para esse efeito e não sei se os blogs do SAPO permitem que isso seja feito.

  33. Patricia

    Preciso de um help

    preciso fazer um link chamar uma pasta q esta dentro da outra pasta.

    ate entao eu estava usando

    ../pasta/index.html

    so que agora nao funciona
    esse codigo p chama pasta dentro de pasta 2x

    alguem pode me ajudar?

  34. Jéssica

    oiie , preciso de uma ajudinha urgente por favor . como faço para mudar o fundo de uma página usando javascript . mas de forma qe altere o css . usar soment bgColor nao adianta por causa do css :/ preciso de outra alternativa . alguem sabe ? obrigada

  35. WESLLEY CLYTON

    ola!.. preciozo de uma ajuda.. vc poderia descrever como feez o exemplo 5?

    vlw

  36. Ivo Gomes

    Olá. Basta fazer “View Source” e os passos estão todos explicados no código.

  37. weslley clyton

    ops.. rsrs vlw.. na realidade nem tinha prestado a atenção..

    mas agora tenhu uma duvida de verdade..

    é o seguinte eu tenho uma div dinamica certo… assim o nome dela vai variar.

    como colocar na funça? pois a função exige um nome fixo..
    pois se eu deixar a div com o nome fixo.. todas as div feitas pelo loop vao ter o mesmo nome. assim quando eu clicar no botão para aparecer vao aparecer todas e quando for fexchar vao fechar todas.. gostaria que cada botao fosse fechar apenas a sua div… vlww

  38. Wagner Cecatto

    Prezados Amigos, excelente matéria, parabéns! Porém tenho uma dúvida e gostaria que vocês me ajudassem, baixei o código e o exemplo usando o jQuery, porém não estou conseguindo colocar mais de uma função na página, ou seja, com vários botões que tenham a tarefa de abrir/fechar conteúdo…podem me ajudar? grato pela atenção de todos!

  39. RodrigoAmorinn

    Cara, muito bom o seu artigo, gostei muito é realmente o que eu precisava, mas como agente coloca a direção para a div abrir? no meu caso eu gostaria que a div abrisse da esquerda para a direita.

    como que eu faço isso?

    help-me =D
    abraços

  40. Giuliano Fernandes

    Caro colega, se pudesse me ahudar ficaria muito grato.

    Utilizei seu menu para separar em pastas os teste de ping que faço em alguns hosts, eu queria saber se tem um jeito de listar estes arquivos gerados dentro das pastas de forma dinamica sem que precise colocar os itens que quero visualizar no codigo. Até porque serão arquivos gerados através de um shell script(arquivos .txt).

    Obrigado!

  41. Flavio

    Ivo parabéns são pessoas como vc que faz pessoas que não tem muito conhecimento procurar sempre aprender mais estas suas dicas são muito úteis

  42. Giovanni

    Ivo, estou aprendendo JS e gostei muito dessa dica, gostaria de utiliza-la da seguinte forma:

    Imagine que tenho um menu ao lado esquerdo da pagina. Link1, Link2, Link3… Quando eu clicar no Link1 utilizando esse efeito vai surgir a imagem1, quando eu clicar no link2, a imagem1 fecha e aparece a imagem2, quando clicar no link3 a imagem1 ou imagem2 (depende daquela que o usuario esta) fecha e abre a imagem3, é possivel? você poderia me ajudar?

    parabens pelo blog, abraço

  43. Redton

    Rapaz tava procurando por algo assim a tempos!
    Obrigado.

  44. Thiago

    Olá
    Como faço para integrar esse código em um tema wordpress?

    Grato!

  45. sidney suderio

    Muito bom o código, pretendo usá-lo para ler um texto criado em c++

    grato

  46. Viniccios

    Amigo, não consegui usar o efeito no link, pode me ajudar?

  47. João MArcos

    Vinicios, veja se esse site ajuda: http://carosamigos.wordpress.com/2009/02/11/abrir-e-fechar-div-com-sinal-de-menos-e-de-mais/

    Neste post tem um link ensinando fazer em jquery tb.

    ^^

  48. @rodrigoaraujo92

    Perfeito cara era exatamente o que eu preucurava!

  49. Fábio Luiz Parizotto

    Valeu mesmo pelo esclareciemento. Mas eu ainda não sei como fazer um “id” com CSS para a div. Eu já vi modelos de idnos c´digos-fonte de vários outros sites que usam este recurso de abrir/fechar, e cada um tem um id diferente nas suas divs. Gostaria de saber exatamente como produzir esse CSS para os ids.
    Grato!

  50. Felipe Braga

    Gostaria de saber como eu faço para derrubar uma página aberta pelo Mozilla Firefox e reabrí-la automaticamente pelo IE, através de código. Se o cara já abiri pelo IE, nada acontece. Alguém poderia me ajudar ??

  51. Ivo Gomes

    @Filipe Braga: Primeiro: nunca deverias fazer uma coisas dessas.
    Segundo: não podes :P

  52. Felipe Braga

    Pois não é que achei um modo de fazer? Uso um shell com comandos DOS depois de GET URL atual e rodo no cliente, funciona, vou aprimorar e mando por aqui.

  53. Angel

    Simplesmente maravilhado com tanta coisa que vi. Pena nao ver o que realmente pretendo para o meu site. De qualquer forma impressionado mesmo.
    Obrigado. ASS: Angel.

  54. Lini

    Estou iniciando no mundo dos blogs e gostaria de colocar em um post esta possibilidade de abrir e fechar clicando no link.
    Tipo: num texto de dicas, colocar o texto e quando enumerar as dicas cada dica ter um link explicativo que ao clicar ela abra e depois clica novamente para ela fechar.

    Exemplo:

    Aproveite o tempo livre com as crianças com muita diversão, criatividade e aprendizagem…

    1) INCENTIVANDO À LEITURA:
    O ideal é deixar sempre livros interessantes e atrativos ao alcance dos olhos e das mãos dos pequenos para que ele intercale as atividades do dia com a leitura ou mesmo visualização das ilustrações oferecidas no livro. Se você não tem este material disponível é interessante localizar a biblioteca mais próxima e tornar-se sócio, você e as crianças, para que possam pegar livros, gibis, revistas, revistinhas emprestados. Se o orçamento permitir adquirir alguns títulos é uma boa opção. Procure se informar quais os títulos adequados a faixa etária de seus filhos para não fazer escolhas erradas. Será que você está pronta ou pronto para estimular a leitura de seu filho(a). Faça o teste e confira.
    P.S.: Quero criar o link neste texto de forma que ao clicar no ítem 1) INCENTIVANDO A LEITURA: O texto abaixo apareça se abrindo no próprio texto e após a leitura eu possa clicar novamente para ele sumir ou se fechar.
    Se puder me orientar melhor fico muito grata.

  55. Ivo Gomes

    @Lini: Coloquei o seu exemplo aqui. Não sei qual vai ser a estrutura do HTML no seu site, mas criei uma de exemplo com 2 links que abrem a respectiva descrição.
    Se vir o código fonte, está lá a explicação de como funciona e pode adaptar como quiser.

  56. Dermeval Junior

    Bom artigo.

    Só uma dica, se ao esconder o elemento, você quiser manter o espaço que ele ocupava antes, é só usar visibility:hidden ao invés de display:none desde que no elemento tenha sido definido altura e largura

  57. Andreza

    Olá,

    Gostei do seu site, muito bem explicado e me ajudou com muitas coisas, porém, agora estou com um problema e gostaria da sua ajuda, se puder: Criei um layout com css e agora precisaria que uma página já publicada executasse dentro desse layout, uma parde dele, eu consigo colocar o link e tal mas a pessoa tem que clicar para ver e nao é isso que eu quero, quero que quando ela entre já mostre, isso seria possível?

  58. Bruno de MAuro

    Procurei muito no Google e achei vocês!
    Finalmente um código que funciona!

    Vlw!

    Abrs!

  59. Alex Souza

    Boa tarde Ivo.

    Como a propriedade eu uso nesse exemplo do José Carlos. Para em vez de clicar para abrir, eu apenas colocar o mouse sobre ?.

    No código tem o bind “click” porém não sei o que colocar para “oumouseover” ou coisa do tipo.

    Fico no aguardo.
    Qualquer coisa me manda no email.

    Grato,

Blogs que "linkam" para aqui

  1. Abrir/Fechar elementos usando Javascript e CSS « [REF]
    16 de Março de 2007, 15:20
  2. Abrir/Fechar elementos usando Javascript e CSS « Thunder-Boy
    31 de Março de 2007, 16:31
  3. Blog do Amendoim… » Abrir/Fechar Conteúdo utilizando Javascript e CSS.
    4 de Setembro de 2007, 16:10

Comente!

* Campo obrigatório, de modo a aparecer o seu nome como autor do comentário

* Campo obrigatório, mas não será mostrado no site

* Campo obrigatório, convém escrever alguma coisa ;)

São permitidas algumas tags HTML, como
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>