Ocultar varias capas cuando hago clic en el enlace de abrir

#1 (**permalink**) 18/12/2011, 13:46

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?

snowmanchip · #2 (**permalink**) 19/12/2011, 15:11

Lo más facil:
http://jqueryui.com/demos/accordion/
Saludos

#3 (**permalink**) 20/12/2011, 04:00

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>

snowmanchip · #4 (**permalink**) 20/12/2011, 07:53

Si creo entender bién esto se puede hacer con el método load de Jquery que es más sencillo y te permite ordenar en otras páginas los contenidos de los enlaces, te pongo un código de ejemplo aplicado al código que posteaste, espero sea lo que buscas, pruébalo y si es lo que buscas te dejo un tutorial donde se explican otras técnicas para lograr esto paso a paso..saludos..

HTML Principal:

Código HTML:

Ver original<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $('#categoria1 .enlace').click(function(){
        $('#contenido').load('contcat1.html');
        
    });
});
$(document).ready(function() {
    $('#categoria2 .enlace').click(function(){
        $('#contenido').load('contcat2.html');
        
    });
});
 
</script>
 
<style type="text/css">
#contizq {
    width:300px;
    float:left;
}
#categoria1{
width: 200px;
top: 0;
left:0;
margin-top: 8px;
margin-left: 8px;
padding: 0;
background-color: #8B8B42;
 
}
#categoria2{
width: 200px;
top: 0;
left:0;
margin-top: 8px;
margin-left: 8px;
padding: 0;
background-color: #8B8B42;
}
#contenido {
    width:500px;
    float:left;
}
.enlace {
    text-decoration:none;
}
h1 {
    font-size:14px;
}
p {
    font-size:10px;
}
 
 
</style> 
</head>
 
<body>
<div id="contizq">
<div id="categoria1">
  <a href="#" class="enlace">Categoría1</a></div>
<div id="categoria2">
<a href="#" class="enlace">Categoría2</a>
</div>
</div>
<div id="contenido">
 
</div>
 
</body>
</html>

Páginas que contienen el contenido de las categorías, sólo a modo de ejemplo, no debe contener nada más que código html, sin estilos no el Doctype, sólo las etiquetas que se visualizarán en las categorías:

Categoría 1, página concat1.html

Código HTML:

Ver original<h1>Contenido categoría 1<h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus, nunc id gravida sollicitudin, mi neque congue justo, vitae suscipit erat odio in nibh. Aenean at nulla tortor, adipiscing commodo nisi. Maecenas turpis nisi, rhoncus a commodo a, porta scelerisque felis. Cum sociis natoque penatibus et magnis dis parturient </p>

Categoría 2, página concat2.html

Código HTML:

Ver original<h1>
Contenido categoría 2
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus, nunc id gravida sollicitudin, mi neque congue justo, vitae suscipit erat odio in nibh. Aenean at nulla tortor, adipiscing commodo nisi. Maecenas turpis nisi, rhoncus a commodo a, porta scelerisque felis. Cum sociis natoque penatibus et magnis dis parturient </p>

Saludos

#5 (**permalink**) 20/12/2011, 08:59

ummm, he creado los tres ficheros, index.html, contcat1.html y contcat2.html, poniendo el código que me has facilitado y no hace nada cuando hago clic en los enlaces.

IsaBelM · #6 (**permalink**) 20/12/2011, 09:00

no te funciona por que estás asignando en lugar de comparando

Cita:

if (val = 1) // asigna. el valor de val es 1
if (val ==1) // compara. evalúa si el valor de val es 1

snowmanchip · #7 (**permalink**) 20/12/2011, 09:39

Isabel tiene razón..así funciona perfecto....

Al revisar veo que me equivoqué en los nombres de esos archivos yo indiqué concat y debe decir contcat, renómbralos con contcat1 y contcat2..
Prueba de nuevo con los códigos exactamente iguales y me dices..a mi me funciona perfecto... en los html que se adjuntan contcat1 y contcat 2 no lleva el doctype...
Saludos

#8 (**permalink**) 20/12/2011, 15:27

oups, la última vez que usé javascript (hace años) me pasó lo mismo, usaba = en vez de ==. Gracias por tu ayuda IsabelM, ahora va perfecto.

snowmanchip, no se que sucede en el caso de tu código. Leyéndolo observe lo del nombre de los archivos y los renombre, pero aún así, no hay modo de que funcione. No he usado doctype, lo único que he hecho es copiar y pegar los códigos sin modificar nada.

Con la solución que me ha dado IsabelM puedo continuar con el proyecto, pero no comprendo que es lo que sucede en el caso de tu código, pues lo mas normal es que funcionara, ya que está igual en tu ordenador que en el mio. Si lo deseas puedes comprimir los 3 archivos en un rar y pasármelo.

Este es el que yo he creado con el código que me has dado: http://drawpr.com/f/1052f/Proyecto%20Menu%20CSS.rar

Aunque reitero que con la solución de Isabel tengo suficiente. Saludos.

IsaBelM · #9 (**permalink**) 20/12/2011, 15:36

Cita:

Iniciado por UsuarioArroba

Aunque reitero que con la solución de Isabel tengo suficiente. Saludos.

ese código deberías de intentar hacerlo mas dinámico

por ejemplo

Cita:

<html>
<head>
<title></title>
<script type="text/javascript">
function abrircategoria(val) {
var seleccion = val.split('#')[1];
for(var i = 1, elem = document.getElementsByTagName('div'); i < elem.length; i++) {
document.getElementById(elem[i].id).style.display = (seleccion == elem[i].id) ? 'block' : 'none';
}
}
</script>
<style type="text/css">
div#categoria1, 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="#categoria1" onclick="abrircategoria(this.href); return false;">Abrir Categoria 1</a>
<a href="#categoria2" onclick="abrircategoria(this.href); return false;">Abrir Categoria 2</a>
</div>
<div id="categoria1">
<a href="#" onclick="this.parentNode.style.display='none'; return false;">Cerrar Categoria 1</a>
</div>
<div id="categoria2">
<a href="#" onclick="this.parentNode.style.display='none'; return false;">Cerrar Categoria 2</a>
</div>
</body>
</html>

snowmanchip · #10 (**permalink**) 20/12/2011, 16:02

El código está bién pero debes probarlo en un servidor local o remoto,
Saludos