Hola, estoy haciendo una especie de menu categorias y dentro de estas productos todo en html, lo que necesito es una funcion en javascript para ocultar y/o mostrar los div's que contienen los productos al hacer click en una categoria, pero solo se deben visualizar los productos de una categoria.
Me explico mas detalladamente si hago click en hardware se mostraran los productos y si hago click en software se ocultara lo anterior y visualizaran los productos de software, aqui dejo mi codigo html
Código:
<html>
<head>
<style>
#fuente1 {color:#FF0000}
</style>
</head>
<body>
<h1>Productos</h1>
<a href="#" id="fuente1">hardware</a><br>
<div style="display:none;">
<li><a href="#">lectoras de cd</a></li>
<li><a href="#">discos duro</a></li>
</div>
<a href="#" id="fuente1">software</a><br>
<div style="display:none;">
<li><a href="#">windows xp</a></li>
<li><a href="#">microsoft office 2003</a></li>
</div>
<a href="#" id="fuente1">otros</a><br>
<div style="display:none;">
<li><a href="#">libros de programacion</a></li>
<li><a href="#">revistas</a></li>
</div>
</body>
</html>
Como veran ya he ocultado los div's con los productos mediante el style:none