Pongo el código que he creado y después la pregunta:
Cita: <html>
<head>
<title></title>
<style type=text/css>
div#categoria1{
width: 200px;
top: 0;
left:0;
margin-top: 8px;
margin-left: 8px;
padding: 0;
background-color: #8B8B42;
display: none;
}
div#categoria2{
width: 200px;
top: 0;
left:0;
margin-top: 8px;
margin-left: 8px;
padding: 0;
background-color: #8B8B42;
display: none;
}
</style>
</head>
<body>
<div id="categorias">
<a href="#" onclick="document.getElementById('categoria1').sty le.display='block';">Abrir Categoria 1</a>
<a href="#" onclick="document.getElementById('categoria2').sty le.display='block';">Abrir Categoría 2</a>
</div>
<div id="categoria1">
<a href="#" onclick="document.getElementById('categoria1').sty le.display='none'">Cerrar Categoría 1</a>
</div>
<div id="categoria2">
<a href="#" onclick="document.getElementById('categoria2').sty le.display='none';">Cerrar Categoría 2</a>
</div>
</body>
</html>
Vale, al abrir la página se ven dos opciones, "abrir categoría 1" y abrir "categoría 2". Si abro "categoría 1" y después "categoría 2", esta última se abre debajo de "categoría 1". Lo que necesito hacer es que cuando abra una categoría, cualquier otra que se haya abierto antes se oculte para que solo se vea una a la vez. ¿Como?