Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Eduardo Sodre

sanfona

Por , em Javascript

Recommended Posts

Eduardo Sodre    0

Eduardo Sodre
Postado

e aew galera

 

precisava da ajuda de vcs

 

alguem sab ou pode da dica de como faço pra sanfona minhas categorias

 

por exemplo

 

>> Vidros

>Parabrisa

>janela lateral

>vidro da porta

 

aparece assim no meu site

 

daew qndo alguem clica na palavra vidro

ficar apenas

 

> Vidros

 

aguem ajuda??

Compartilhar este post

Link para o post
Compartilhar em outros sites

berkowitz    2

berkowitz
Postado

eu só perguntei se é isso o que voce procura! heeheh...

Você entrou no site e olhou?

Compartilhar este post

Link para o post
Compartilhar em outros sites

berkowitz    2

berkowitz
Postado

certo.

Da uma olhada no código fonte dele! É uma página de exemplo e ensina perfeitamente como fazer... é bem fácil!

Lá estão utilizando o framework jQuery! Para utilizá-lo é só baixar o arquivo para o seu site e fazer a chamada dele na página (assim como está no código).

 

Eis o código:

 

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
	<title>DL Demo</title>
	<script src="http://jquery.com/src/jquery.js"></script>
	<script>
	$(document).ready(function(){
		$("dd:not(:first)").hide();
		$("dt a").click(function(){
			$("dd:visible").slideUp("slow");
			$(this).parent().next().slideDown("slow");
			return false;
		});
	});
	</script>
	<style>
	body { font-family: Arial; font-size: 16px; }
	dl { width: 300px; }
	dl,dd { margin: 0; }
	dt { background: #F39; font-size: 18px; padding: 5px; margin: 2px; }
	dt a { color: #FFF; }
	dd a { color: #000; }
	ul { list-style: none; padding: 5px; }
	</style>
</head>
<body>
<dl>
	<dt><a href="/">jQuery</a></dt>
	<dd>
	<ul>
		<li><a href="/src/">Download</a></li>
		<li><a href="/docs/">Documentation</a></li>
		<li><a href="/blog/">Blog</a></li>
	</ul>
	</dd>
	<dt><a href="/discuss/">Community</a></dt>
	<dd>
	<ul>
		<li><a href="/discuss/">Mailing List</a></li>
		<li><a href="/tutorials/">Tutorials</a></li>
		<li><a href="/demos/">Demos</a></li>
		<li><a href="/plugins/">Plugins</a></li>
	</ul>
	</dd>
	<dt><a href="/dev/">Development</a></dt>
	<dd>
	<ul>
		<li><a href="/src/">Source Code</a></li>
		<li><a href="/dev/bugs/">Bug Tracking</a></li>
		<li><a href="/dev/recent/">Recent Changes</a></li>
	</ul>
	</dd>
</dl>
</body>
</html>

ABRAX!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito