Elementos DIV permitem que você agrupe itens numa página Web. Existem duas formas para fazer com que tais elementos desapareçam. Você pode transformá-la em um elemento invisível, inserindo um espaço em branco no local ou contraindo o elemento, sem que haja um espaço em branco na página. Utilizando um código JavaScript acionado por um botão, você pode criar seus elementos DIV que contraem e expandem a partir do clique do usuário.
Instruções
-
Inicie o Notepad e abra qualquer documento HTML.
-
Inclua esse bloco HTML na seção "body" do documento:
Texto DIV
Esse código cria uma DIV e um botão. A DIV contém um parágrafo com o texto "Texto DIV". Substitua-o pelo que desejar. O botão ao ser clicado chama uma função em JavaScript. Tal função faz com que a DIV alterne entre os estados de contração e expansão.
-
Localize os atributos "id" e "class" no elemento DIV. Para criar a expansão e contração na DIV, você deve inserir um valor no atributo "id". Nesse exemplo, o valor é "minhaDiv". Ela também tem o atributo "class", que nessa instância está com o valor "divVisivel". Esse é o nome da classe CSS definida na próxima parte.
Inserindo a DIV numa página Web
-
Inclua o código abaixo na seção "head" do documento:
O código anterior cria as classes "divVisivel" e "divEscondida". A classe "divVisivel" configura a propriedade "display" como "block". O valor "block" torna qualquer elemento HTML que referencia a classe como visível e a expande para ocupar a página. Já a classe "divEscondida" configura a propriedade "display" como "none". Qualquer elemento HTML referenciado por tal classe será contraído, sem deixar espaço na página.
-
Inclua os comandos abaixo logo após o código CSS:
A variável "divID" armazena o valor "id" do elemento DIV que você deseja contrair e expandir. Tal valor é "minhaDiv". O restante do código obtém o valor atual da classe e o alterna em cada execução. Na primeira vez que o código é executado, ele muda o nome da classe para "divEscondida". Quando o código é executado pela segunda vez, o valor é alterado para "divVisivel".
-
Salve o documento HTML e abra-o no seu navegador. O parágrafo de texto será exibido.
-
Clique no botão "Contrair/Expandir". O texto contrai. Clique no botão novamente para expandir o texto. Observe como o botão e os outros elementos abaixo do texto posicionam-se quando o texto é contraído e expandido.
