Lista que muestre "hijos" al pulsar y se oculte al pulsar otro elemento de la lista

[xPsycologik]

Buenas tardes,

Tengo un pequeño proyecto web entre manos y me estoy quedando loco con algo que en principio era fácil.

Estoy haciendo un panel de navegación en el que tengo unas categorías padre y unos hijos que quiero que se muestren al hacer click en el padre y se oculten si pulsas en otro padre. Es decir, algo así:

_ Categoría Padre 1
____ Categoría Hija 1A
____ Categoría Hija 1B
_ Categoría Padre 2
____ Categoría Padre 2A
_ Categoría Padre 3
____ Categoría Hija 3A
____ Categoría Hija 3B

Me gustaría que quedase de tal forma que al pulsar en "Categoría Padre 1", mostrase:

_ Categoría Padre 1
____ Categoría Hija 1A
____ Categoría Hija 1B
_ Categoría Padre 2
_ Categoría Padre 3

y por ejemplo, si pulsamos en "Categoría Padre 2" nos quedara:

_ Categoría Padre 1
_ Categoría Padre 2
____ Categoría Padre 2A
_ Categoría Padre 3

Lo único que he conseguido hacer es que al pulsar sobre una se abra y muestre los hijos, pero no hay narices a que se cierre al pulsar sobre otra categoría padre...

¿Alguna idea? Mil gracias de antemano.

[xPsycologik]

He de decir que supongo que será tan sencillo cómo asignar al segundo enlace el mismo que hace que oculta el texto o enlace en el típico código de "mostrar/ocultar" para los otros dos enlaces... pero no tengo ni idea de cómo hacerlo.

Gracias.

[madhatterdef]

mira esto puede que te sirva
http://www.davidrojas.net/index.php/...-css-y-jquery/

[xPsycologik]

Iniciado por madhatterdef

mira esto puede que te sirva
[url]http://www.davidrojas.net/index.php/diseno-web/menu-vertical-en-acordeon-con-css-y-jquery/[/url]

¡Perfecto! Era exactamente lo que buscaba y funciona de lujo.

Por rizar el rizo un poco, ¿podríamos hacer que dependiendo de la URL en la que estés mostrase un menú ya extendido?

Es decir, si yo tengo la Categoría 1 con 3 hijos y la Categoría 2 con 2 hijos, al entrar en la URL de la Categoría 1 que se me viesen los 3 hijos sin necesidad de pulsar.

Gracias

[IsaBelM]

primero decir que me parece exagerado usar jquery para hacer algo tan simple

.ocultar {display:none;}
.mostrar {display:block;}
.sel {color:#FF0000;}
.nosel {color:#000000;}

var visto_subm = null;
var visto_color = null;
function ver(val) {
objhl = document.getElementById(val);
obj = document.getElementById(val + '_opcion');

obj.className = (obj==visto_subm) ? 'ocultar' : 'mostar';
objhl.className = (objhl==visto_color) ? 'nosel' : 'sel';

if ((visto_subm != null) && (visto_color != null)) {
visto_subm.className = 'ocultar';
visto_color.className = 'nosel';
}
visto_subm = (obj==visto_subm) ? null : obj;
visto_color = (obj==visto_color) ? null : objhl;
}

<div id="menu1" class="nosel" onclick="ver(this.id)" style="z-index:1;">MENU0</div>
<div id="menu1_opcion" class="ocultar" style="z-index:1;">
SubMenu0<br />
SubMenu0<br />
SubMenu0
</div>

<div id="menu2" class="nosel" onclick="ver(this.id)" style="z-index:1;">MENU1</div>
<div id="menu2_opcion" class="ocultar" style="z-index:1;">
SubMenu1<br />
SubMenu1<br />
SubMenu1
</div>


<div id="menu3" class="nosel" onclick="ver(this.id)" style="z-index:1;">MENU2</div>
<div id="menu3_opcion" class="ocultar" style="z-index:1;">
SubMenu2<br />
SubMenu2<br />
SubMenu2
</div>


<div id="menu4" class="nosel" onclick="ver(this.id)" style="z-index:1;">MENU3</div>
<div id="menu4_opcion" class="ocultar" style="z-index:1;">
SubMenu3<br />
SubMenu3<br />
SubMenu3
</div>

con respecto a tu pregunta de tu último post. usar window.name que es como las "sesiones" sesiones de otros lenguajes (asp, php, ..)