Ramon Victor

Um dos propósitos de eu ter migrado meu site  para a versão blog, foi a possibilidade de expor minhas idéias sobre o desenvolvimento web, bem como criar uns tutorias para ajudar aos interessados  na área.

Sem muita conversa, vamos praticar! Esse tutorial tem o propósito de criar uma lista de definição com o efeito toggle do jquery. E funciona da seguinte maneira: quando o usuário clicar no link, localizado dentro da tag “dt”,  a definição desse título (dd) abrirá com efeito slide (Veja os códigos abaixo).

Veja o demo.

XHTML:

<dl class="lista_definicao">
 <dt><a href="#">Título exemplo 1</a></dt>
 <dd>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dui diam, tincidunt eu dignissim non, blandit non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dui diam, tincidunt eu dignissim non, blandit non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
 </dd>
 <dt><a href="#">Título exemplo 2</a></dt>
 <dd>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dui diam, tincidunt eu dignissim non, blandit non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dui diam, tincidunt eu dignissim non, blandit non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 </dd>
</dl>

CSS

* { margin: 0; padding: 0}
.lista_definicao dt a {
  display: block;
  padding: 5px;
  background-color: #e1e1e1}
.lista_definicao dt a.ativo {
  background-color:#666666;
  color: #fff
}
.lista_definicao dd {
  display: none;
  padding: 10px;
  background-color: #EFEFEF
}

Javascript (jquery)

Para tudo funcionar você precisa linkar para a biblioteca do jquery e configurar a função toggle (dentro da tag “head” do documento) como podemos ver abaixo.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $(".lista_definicao dt a").toggle(function() {
     $(this).parent().next("dd").slideDown(800);
     $(this).addClass("ativo");
  },
  function() {
     $(this).parent().next("dd").slideUp(800);
     $(this).removeClass("ativo");
  });
});
</script>

Vantagens deste script:

• Caminha pela arvore do DOM, logo é possível adicionar dinamicamente vários “dt” e “dd” que funcionará sem a necessidade de inserir novos ids ou classes.
• Você pode customizar o CSS adicionando novos estilos a títulos, descrição e até mesmo para a classe “ativo” (que é adicionada quando clicamos no link).
• Funciona nos principais browsers: Internet Explorer 6+, FireFox, Chrome, Safari e Opera.

Faça o download do tutorial e ajuste às suas necessidades.