RHOdesign Blog | Webdesign

Um dos truques mais úteis e legais que um desenvolvedor web pode aprender é usar DIVs expansíveis, também conhecidas como collapsible DIVs.

Esse efeito dá ao usuário a possibilidade de expor na página somente o conteúdo que ele quer ver naquele momento. Se eles estiverem interessados em ver os detalhes desse conteúdo, podem clicar em um link ou imagem e a página cresce dinamicamente para mostrar o conteúdo que ali estava “escondido”.

Vamos a prática!

1. Abra seu editor de html e cole o seguinte código em sua nova página, dentro da body:

<a href="javascript:;" onmousedown="toggleDiv('minha-div-1');">
Toggle Div 1 Visibility</a>
<div id="minha-div-1" style="display:none">
<h3>This is a test!<br>Can you see me?</h3>
</div>
<br />
<a href="javascript:;" onmousedown="toggleDiv('minha-div-2');">
Toggle Div 2 Visibility</a>
<div id="minha-div-2" style="display:none">
<h3>This is a test!<br>Can you see me?</h3>
</div>

2. Agora insira dentro da tag HEAD o seguinte javascript:

<script language="javascript">
  function toggleDiv(divid){
    if(document.getElementById(divid).style.display == 'none'){
      document.getElementById(divid).style.display = 'block';
    }else{
      document.getElementById(divid).style.display = 'none';
    }
  }
</script>

3. Publique a página e veja que está tudo funcionando.

Agora basta mudar o conteúdo para o que você deseja mostrar e inserir um pouco de CSS para deixar a formatação mais bonita.