Ocultar un bloque cuando se despliega otro con un acordeón de JQuery

[malucha]

Buenas!

Ante todo decir que no tengo prácticamente idea de JavaScript por lo que me es tremendamente complicado entender su código.

Sin embargo, lo necesito para un menú desplegable que tengo que hacer para una página web. Para ello, estoy utilizando este que ya viene listo para utilizar y es muy sencillo: http://rosanko.blogspot.com/2011/04/...dion-menu.html

El motivo del uso de este en concreto es que parece muy sencillo de implementar y efectivamente, lo es. El funcionamiento es el siguiente:

Al hacer clic sobre el elemento padre, se despliega (si está oculto) y se oculta (si está desplegado) el elemento hijo. Sin embargo, si despliegas el primer elemento padre, y posteriormente quieres desplegar un segundo elemento padre, se mantienen los dos abiertos, no se cierra el primero, por lo que aquí viene mi solicitud de ayuda:

1. ¿Cómo puedo hacer para que al hacer clic sobre otro elemento padre, se cierre el que ya está abierto?
2. ¿Cómo puedo hacer para que un elemento padre en concreto aparezca desplegado por defecto (si se puede hacer, que tampoco lo sé)?

El código de la función es simplemente el siguiente:

Código Javascript:

$(document).ready(function()
{
    $("#menulateral span.despliega").click(function()
    {
        $(this).next("ul.acordeon").slideToggle(300).siblings("ul.acordeon").slideUp("slow");
    });
});
 

Mi menú es bastante simple, es un menú vertical donde hay varios elementos y sólo dos tienen opciones internas.

¡Estoy desesperada ya! Echadme una mano por favor...!
Gracias por vuestra ayuda :)

[caricatos]

Tema movido desde javascript

[masterpuppet]

Que tal malucha,

Deberia comportarse de esa forma, abrir el que haces click y cerrar el resto, pero para que esto funcione debe haber una estructura html determinada, por lo que veo, para que funcione correctamente deberias tener algo asi:

Código HTML:

<div id="menulateral"> 
    <span class="despliega">Trigger</span>
    <ul class="acordeon">
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
    <span class="despliega">Trigger</span>
     <ul class="acordeon">
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
    <span class="despliega">Trigger</span>
     <ul class="acordeon">
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</div>
 

ajusta el html o bien postealo para ver que puede estar fallando y para que aparezca el primero abierto, o bien lo haces por css o puedes disparar el click, algo asi:

Código Javascript:

$(document).ready(function() {
    var triggers = $("#menulateral span.despliega");
    triggers.click(function() {
        $(this).next("ul.acordeon").slideToggle(300).siblings("ul.acordeon").slideUp("slow");
    });
    triggers.first().click();
});
 

Saludos.

[malucha]

Pues sí, perdón. Pego el código html del menú a ver si nos da alguna idea:

Código HTML:

<div id="menulateral">
        <ul>
            <li><a href="#" title="Quienes Somos">Quienes somos</a></li>
            <li><a href="#" title="Nuestros Profesionales">Nuestros profesionales</a></li>
            <li><span class="despliega">Qué es el tarot</span>
                <ul class="acordeon">
                    <li><a href="#" title="Historia y Significado del Tarot">Historia y Significado</a></li>
                    <li><a href="#" title="Interpretación de las cartas">Interpretación de las cartas</a></li>
                    <li><a href="#" title="Tipos de cartas">Tipos de cartas</a></li>
                    <li><a href="#" title="Tarot y Astrología">Tarot y Astrología</a></li>
                    <li><a href="#" title="Tarot y Kabbalah">Tarot y Kabbalah</a></li>
                    <li><a href="#" title="Consulta personalizada" class="especial">Consulta personalizada</a></li>
                    <li><a href="#" title="Tarot del día gratuíto">Tarot del día gratuíto</a></li>
                </ul></li>
            <li><span class="despliega">Qué es la astrología</span>
                <ul class="acordeon">
                    <li><a href="#" title="Historia de la Astrología">Historia de la Astrología</a></li>
                    <li><a href="#" title="Características de los signos">Características de los signos</a></li>
                    <li><a href="#" title="Interpretación de las Cartas Astrales">Interpretación de las cartas</a></li>
                    <li><a href="#" title="Significado del sol, la luna y el ascendente en las cartas astrales">Significados</a></li>
                    <li><a href="#" title="Fases de la luna">Fases de la luna</a></li>
                    <li><a href="#" title="Significado de la luna cuando entra en cada signo">La luna en los signos</a></li>
                    <li><a href="#" title="Los tránsitos planetarios y las 12 casas - Pronósticos para el 2011">Tránsitos planetarios. 12 casas</a></li>
                    <li><a href="#" title="Consultas personalizadas de las cartas astrales" class="especial">Consultas personalizadas</a></li>
                    <li><a href="#" title="Autores y Contribuciones de destacados astrólogos">Autores y contribuciones</a></li>
                </ul></li>
            <li><a href="#" title="Numerología - Significado">Numerología</a></li>
            <li><a href="#" title="Novedades de interés">Novedades</a></li>
            <li><a href="#" title="Links relacionados">Links relacionados</a></li>
            <li><a href="#" title="Formulario de contacto">Formulario de contacto</a></li>
        </ul>
    </div> 

Gracias! :)

[masterpuppet]

A ver,

Primero deberias por css cerrar todos los acordeon's, agrega a tu cascada

Código CSS:

.acordeon{display:none}
 

y luego el javascript podria ser asi:

Código Javascript:

$(document).ready(function(){                
    var togglers = $('#menulateral ul.acordeon');
    var triggers = $('#menulateral span.despliega');
    triggers.click(function() {
        togglers.slideUp('slow');
        $(this).next('ul.acordeon').slideToggle(300);
    });                
    triggers.first().click();                
});
 

prueba y nos comentas.

[malucha]

Buenooo casi casi está como quiero :)

masterpuppet tu código me funciona bien. El caso es que antes de cerrar el anterior me abre el nuevo, es prácticamente un segundo pero al tener los dos abiertos aunque sea durante ese segundo se sale de la caja.

¿No se puede invertir el orden? ¿Primero cerrar el abierto y luego abrir el nuevo?

Mil gracias por la ayuda! :)

[malucha]

Bueno, revisando algún que otro post (y aún sin entender prácticamente nada de JavaScript y menos todavía de JQuery) encontré la solución para cerrar a la vez que se abre el otro elemento, de forma que no se salga del cuadro.

Lo dejo aquí por si alguien lo necesita:

Código Javascript:

$(document).ready(function(){                
    var togglers = $('#menulateral ul.acordeon');
    var triggers = $('#menulateral span.despliega');
    triggers.click(function() {
        togglers.slideUp('slow');
        $(this).next('ul.acordeon').slideDown('slow');
    });                
    triggers.first().click();                
});
 

De todas formas, si hago clic sobre el mismo elemento, este se vuelve a desplegar (aunque ya esté desplegado) y claro, lo ideal sería que un clic desplegara, otro clic encogiera.

¿Alguien tiene alguna idea? ¡Ayudaaaaa!

Gracias! :)

[pinchapilas]

Hola a todos.

Imagino que por fecha estara resuelto pero por si acaso. Aqui [URL="http://www.jourmoly.com.ar/mootools-accordion/"]http://www.jourmoly.com.ar/mootools-accordion/[/URL] explican bastante bien el funcionamiento de acordeon. A ver si esto te vale.

Yo el problema que tengo, por si alguien me lo puede decir, es que al pinchar en un enlace y pasar a otra pagina el acordeon se me cierra y me gustaria que se quedase abierto por el mismo sitio. ¿Sabeis como se hace?

Un saludo a todos.