Como expandir e recolher texto em HTML

O HTML 5 promete sites interativos ricos, mas, neste momento, os navegadores variam em implementações de recursos e muitas empresas ainda não implantaram navegadores compatíveis com o novo padrão. Mesmo assim, a interação rica pode ser implementada com os navegadores atuais. Para aqueles com pouca experiência em JavaScript, tente usar a propriedade innerHTML da tag div para expandir e contratar contornos e adicionar ajuda interativa ao seu site.

Crie um novo projeto

Abra sua ferramenta de desenvolvimento da Web favorita e crie um novo website. As ferramentas do Visual Studio da Microsoft serão usadas aqui, já que a versão do WebDev pode ser baixada gratuitamente e inclui um servidor Web embutido.

Crie uma nova página HTML

Crie uma nova página default.htm. Clique em "Project", "Add Item", em seguida, escolha "Página HTML" e nomeie-o como default.htm. Se um arquivo default.aspx já existir, exclua-o. Alterne para o modo de exibição HTML ou de marcação e adicione o seguinte código após a tag.

Página de exemplo

1? Título 1

2? Título 2

A tag h3 cria um cabeçalho de página intitulado “Sample Page”, seguido por duas linhas de um contorno. Cada linha começa com um número, um ponto de interrogação e um título. Os pontos de interrogação são cercados por âncora ((tags que os transformam em links clicáveis). Após cada título, adicionamos uma tag div vazia onde o texto adicional pode ser inserido.

Adicione o JavaScript

Adicione uma função JavaScript que possa ser ativada por cada um dos links do ponto de interrogação da seguinte maneira:

Cada um dos links chama a função JavaScript help_click, passando o tagname div e algum texto adicional. A função primeiro testa para ver se a tag div está vazia (div.innerHTML == “”). Se a tag estiver vazia, o código adicionará uma quebra de linha (

), três caracteres em branco () seguidos do texto. Se o div já contiver texto, a marcação dentro da tag div será limpa.

Teste a nova página

Teste o código. Para o Visual Studio, clique na tecla “F5”. Quando a página aparecer, clique em um dos pontos de interrogação. Na primeira vez em que o link na linha 1 é clicado, o contorno se expande para incluir o texto “Texto adicional para o título 1”. Na segunda vez que o link é clicado, o texto desaparece. Com um pequeno código de criativo, essa mesma técnica pode ser usada para criar visualizações em árvore, contornos complexos ou para mostrar e ocultar o texto de ajuda.