×
Loading ...

Como expandir e contrair um elemento DIV pelo JavaScript

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

Veja como controlar a exibição de um elemento DIV. (internetseite image by FX Berlin from Fotolia.com)

    Inserindo a DIV numa página Web

  1. Inicie o Notepad e abra qualquer documento HTML.

    Loading...
  2. 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.

  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 classes CSS e JavaScript

  1. Inclua o código abaixo na seção "head" do documento:

    type="text/css"> .divVisivel {display:block;} .divEscondida {display:none;}

    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:

    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.

Loading...

Dicas

  • 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.

Referências

Recursos

Loading ...
Loading ...