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.
- Nível de dificuldade:
- Moderadamente fácil
Outras pessoas estão lendo
Instruções
- 1
Inicie o Notepad e abra qualquer documento HTML.
- 2
Inclua esse bloco HTML na seção "body" do documento:
<div id="minhaDiv" class="divVisivel"> <p>Texto DIV</p> </div>
<input id="Button1" type="button" value="Contrair/Expandir" onclick="return CollapseExpand()" />
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.
- 3
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
- 1
Inclua o código abaixo na seção "head" do documento:
<style type="text/css"> .divVisivel {display:block;} .divEscondida {display:none;} </style>
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.
- 2
Inclua os comandos abaixo logo após o código CSS:
<script language="javascript" type="text/javascript"> var divID = "minhaDiv"; function CollapseExpand() {
var divObject = document.getElementById(divID); var currentCssClass = divObject.className;
if (divObject.className == "divVisivel") divObject.className = "divEscondida"; else divObject.className = "divVisivel"; } </script>
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".
- 3
Salve o documento HTML e abra-o no seu navegador. O parágrafo de texto será exibido.
- 4
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.
Inserindo classes CSS e JavaScript
Dicas & Advertências
- No exemplo, o "id" da DIV é "minhaDiv". Altere esse valor para algo mais explicativo para você. Se você mudar o valor, localize a variável "divID" no código JavaScript, e mude seu valor de "minhaDiv" para o novo valor também.