Como expandir e contrair um elemento DIV pelo JavaScript

Escrito por kevin lee | Traduzido por cezar rosa
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como expandir e contrair um elemento DIV pelo JavaScript
Veja como controlar a exibição de um elemento DIV. (internetseite image by FX Berlin from Fotolia.com)

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

    Inserindo a DIV numa página Web

  1. 1

    Inicie o Notepad e abra qualquer documento HTML.

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

    Salve o documento HTML e abra-o no seu navegador. O parágrafo de texto será exibido.

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

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.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível