Como Expandir e Recolher Texto em uma Página Web

Há muitas situações em que um web designer precisa expandir e recolher texto em um site. Este recurso é especialmente útil para FAQs, organização de posts de blog e criação de charadas e quizzes. Insira este código JavaScript no seu site para implementar texto recolhível.

Passo 1

Abra o código HTML da página onde deseja adicionar texto recolhível. Localize as tags <head> e </head>. Entre elas, copie e cole o seguinte código:
<script type="text/javascript"> function openClose(id) { var div = document.getElementById(id); if (div.style.display == 'none') { div.style.display = 'block'; } else { div.style.display = 'none'; } } </script>

Passo 2

Localize a seção do <body> onde seu texto recolhível deve ir. Cole o seguinte código lá. Esta linha cria um cabeçalho que alterna uma seção com id "a1": <h3 onclick='openClose("a1")' style="cursor:pointer">Seção 1</h3> Insira o texto da seção dentro de um container com id "a1" e classe "texter": <div id="a1" class="texter" style="display:none">Conteúdo da Seção 1</div>

Passo 3

Se precisar de itens adicionais, continue o padrão, usando pares diferentes de ids para cada título e área de conteúdo. Salve o arquivo e teste o código para garantir que funciona. Você deve conseguir clicar em um cabeçalho para revelar texto oculto e clicar novamente para escondê-lo.

• Como Alterar Data e Propriedades em Arquivos JPG
• Como Determinar a Memória Virtual