Gracias snowmanchip, pero no quiero hacer un acordeón. Mi idea es ubicar luego las capas con las opciones de cada categoría a la derecha y dejar a la izquierda los enlaces para ir abriendo cada una de estas.
Había pensado en usar javascript para cerrar alguna capa que hubiese abierto anteriormente y abrir la que deseo, pero el código no funciona. Lo dejo por si alguien lograse averiguar que es lo que estoy haciendo mal:
Código:
<html>
<head>
<title></title>
<script type="text/javascript">
function abrircategoria(val)
{
if (val = 1)
{
document.getElementById('categoria2').style.display='none'
document.getElementById('categoria1').style.display='block'
}
if (val = 2)
{
document.getElementById('categoria1').style.display='none'
document.getElementById('categoria2').style.display='block'
}
}
</script>
<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="javascript:abrircategoria(1)">Abrir Categoria 1</a>
<a href="#" onclick="javascript:abrircategoria(2)">Abrir Categoria 2</a>
</div>
<div id="categoria1">
<a href="#" onclick="document.getElementById('categoria1').style.display='none'">Cerrar Categoria 1</a>
</div>
<div id="categoria2">
<a href="#" onclick="document.getElementById('categoria2').style.display='none';">Cerrar Categoria 2</a>
</div>
</body>
</html>