FAQ: Estilizado com Jquery

0 comentários Postado por André Baptista às 14:20

Ae galera segue um exemplo que fica bem legal com Jquery também pode-se usar em outras partes do seu site como por exemplo menus ou algo do tipo.

Quando resolvi bolar este tutorial foi para parte de faq de um site qualquer.

bom vamos ao código:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Teste</title>
<meta http-equiv="Content-Language" content="pt-br" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" charset="utf-8">
 /* <![CDATA[ */

 $(function() {
  //aqui escondo todas as linhas que estão com a classe .esconde
  $(".esconde").hide();

  //agora em cada linha que o usuário clicar será mostrado a próxima linha que possui a classe .esconde
  $("ul li").click(function() { 
   $(this).next(".esconde").slideToggle(300);
  });
 });
 
 /* ]]> */

</script>
<style type="text/css">
body { font-family: Arial; font-size: 12px; }
ul li { width: 500px; heigth: 50px; display: block; background: #ccc; margin: 2px; padding: 5px; }
ul li:hover { background: #666; color: #f4f4f4 }
.esconde { background: white !important; border: solid #ccc; border-width: 1px 0; }
</style>
</head>
<body>
  <ul>
   <li>1. Pergunta Um ?</li>

   <li class="esconde">bla bla bla bla bla bla bla bla bla bla bla</li>
   <li>2. Pergunta Dois ?</li>
   <li class="esconde">bla bla bla bla bla bla bla bla bla bla bla</li>

   <li>3. Pergunta Três ?</li>
   <li class="esconde">bla bla bla bla bla bla bla bla bla bla bla</li>
  </ul>
</body>
</html>


o jquery está comentado o resto é tranquilaço..
só copiar o código e colar em um bloco de notas e ver o resultado..
qualquer dúvida.. prendem o grito

[]'s.

 

Marcadores: ,

Postagens mais recentes Postagens mais antigas Página inicial

Subscribe to: Postagens (Atom)