Ramon Victor

Criando uma lista de definição com efeito toggle do Jquery

| 3 Comments

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 e ajuste às suas necessidades.

:)

Author: ramonvictor

Designer de Interação e Desenvolvedor Frontend. Especialista em Design da Informação pela UFPE e graduado em Sistemas para Internet pela Faculdade Marista.

3 Comments

  1. Para inaugurar meu blogfolio, um tutorial de #jquery + #xhtml + #css! visitem:

  2. Eu ia fazer um post similar ao teu, aproveitando eu faria só uma modificação no script, pra que apenas um item ficasse aberto como fiz com uma ajuda de um nerd nesse site

    http://www.mvsistemas.com.br/produtos/index

    Mas é isso é aí, muito bom ;]

  3. Fala Bruno!
    Consegui fazer um efeito safonado da seguinte forma:

    $(document).ready(function() {
    $(".lista_definicao dt a").click(
    function() {
    $(this).parent().parent().find("a").removeClass("ativo");
    $(this).parent().parent().find("dd").slideUp(600);
    $(this).parent().next("dd").slideDown(800);
    $(this).addClass("ativo");
    });
    });

Deixe uma resposta