Como expandir e recolher texto em uma página da web

Mulher ajudando homem com computador

Crédito da imagem: Jupiterimages / Pixland / Getty Images

Muitas vezes, um web designer precisa expandir e recolher o texto em um site. Esse recurso é especialmente útil quando se trata de configurar perguntas frequentes, organizar entradas de blog e criar recursos de enigmas e questionários. Insira este código Java em seu site para implementar texto recolhível.

Passo 1

Abra o código HTML da página da web à qual deseja adicionar texto recolhível. Localize as tags e. Entre eles, copie e cole o seguinte código:

Vídeo do dia

Passo 2

Localize a seção de onde seu texto recolhível deve ir. Cole o código a seguir lá. Esta linha cria um cabeçalho que alternará uma seção com um id de "a1"

Seção 1

Insira o texto da seção dentro de um contêiner com id "a1" e uma classe de "texter".

Conteúdo da seção 1.

etapa 3

Se você precisar de itens adicionais, continue com o padrão, usando diferentes pares de ids para cada título de seção e área de conteúdo. Salve seu arquivo e teste seu código para verificar se ele funciona corretamente. Você deve conseguir clicar em um cabeçalho para abrir o texto oculto e, em seguida, fazê-lo desaparecer.