Mostrar ocultar paneles jQuerry

[lockalt]

Hola!

A ver si me podéis echar una mano.

Tengo dos páginas. Pag1 y Pag2
En una de las páginas (Pag1) tengo cuatro enlaces.
Los enlaces van a la misma página (Pag2), esta segunda página tiene un menú desplegable, mediante un id muestra un panel u otro al cargar la página.
Lo que me interesaría es que dependiendo del enlace que clickara en la Pag1 al ir a la Pag2 se abriera el panel correspondiente.

Estoy utilizando esta demo (en concreto la muestra 2): http://www.i-marco.nl/weblog/jquery-accordion-3/

Sabéis alguna manera de hacerlo?

Muchas gracias!

[Naahuel]

Si te fijás en el segundo ejemplo en la página que me pasaste, podés asignar la clase expand al elemento que querés que aparezca desplegado.

Opción 1 : PHP

Si estás haciendo el sitio en PHP, yo creo que sería más sólido si pasás variables con PHP. Podrías hacer algo así:

En la página 1, enlazás a la página 2 así:

Código HTML:

<a href="pagina2.php?expand=servicios">Servicios</a>
 

Y en la página 2, tendrías algo así:

Código PHP:

<?php ?>
<ul class="menu">
    <li <? echo $_GET['expand']=='inicio' ? "class='expand'" : ""; ?>><a href="#">Inicio</a>
        <ul>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
        </ul>
    </li>
    <li <? echo $_GET['expand']=='servicios' ? "class='expand'" : ""; ?>><a href="#">Servicios</a>
        <ul>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
        </ul>
    </li>
    <li <? echo $_GET['expand']=='contacto' ? "class='expand'" : ""; ?>><a href="#">Contacto</a>
        <ul>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
        </ul>
    </li>
</ul>
<?php ?>
 

Entonces, si la variable $_GET['expand'] es "servicios", entonces se le asignará la clase expand a ese botón.


Opción 2 : jQuery

La otra opción que se me ocurre (si no estás usando PHP) es pasar un hash.

En la página 1, enlazás a la página 2 así:

Código HTML:

<a href="pagina2.html#servicios">Servicios</a>
 

Y en la página 2, tendrías un HTML algo así:

Código HTML:

<ul class="menu">
    <li class="inicio"><a href="#">Inicio</a>
        <ul>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
        </ul>
    </li>
    <li class="servicios"><a href="#">Servicios</a>
        <ul>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
        </ul>
    </li>
    <li class="contacto"><a href="#">Contacto</a>
        <ul>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
        </ul>
    </li>
</ul>
 

Fijate que cada elemento tiene una clase que lo distingue (la clase será el nombre que pasaremos por el hash). Entonces con un pequeño script le asignamos la clase expand:

Código Javascript:

$(function(){
    //analizar hash
    var el_activo = location.hash ? location.hash.split('#')[1] : false;
    if(el_activo){
        $('li.' + el_activo).addClass('expand');
    }
});
 

Espero que al menos te haya dado una idea :P

[lockalt]

Si me has dado una idea de por donde ir pero algo debo estar aplicando mal.
El PHP ni me lo planteo :S. Entonces estoy utilizando el metodo js.

Realize en la pagina1.html:

Código HTML:

<a href="pagina2.html#ser1">ser1</a>
<a href="pagina2.html#ser2">ser2</a>
<a href="pagina2.html#ser3">ser3</a>
<a href="pagina2.html#ser4">ser4</a>
 

Entonces en la pagina2.html como comentas añadí cada una de las clases a cada li

Código HTML:

<ul class="menu">
    <li class="ser1"><a href="#">Inicio</a>
        <ul>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
        </ul>
    </li>
    <li class="ser2"><a href="#">Servicios</a>
        <ul>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
        </ul>
    </li>
    <li class="ser3"><a href="#">Contacto</a>
        <ul>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
        </ul>
    </li>
    <li class="ser4"><a href="#">Packs</a>
        <ul>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
        </ul>
    </li>
</ul>
 

Y añadi en el head la lineas de js
Cambiando el "el_activo" por cada una de mís clases lo repetí 4 veces ;S pero no hay manera.

Código Javascript:

$(function(){
  //analizar hash
  var ser1 = location.hash ? location.hash.split('#')[1] : false;
      if(ser1){
           $('li.' + ser1).addClass('expand');
      }
});
 

Veo la luz al final del túnel pero creo que hay algo que no aplico bien :S
A ver si alguien puede saber donde tengo el problema :/

[Naahuel]

No! No hace falta que repitas eso 4 veces! Como te lo pasé yo tiene que funcionar perfectamente. el_activo es una variable que almacena el valor que se ha pasado luego del # en el url. Entonces busca el elemento que coincide con esa clase.

El problema está en algo que no te he especificado :P El asunto es que estamos asignándole la clase después de haber cargado el menú. Entonces no va a funcionar. Para que funcione asegurate de poner el script que detecta la clase antes del script del menu.

Mirá: http://nahueljose.com.ar/temp-demo-acordeon/

Si hacés click sobre cada sección, en la próxima aparecen abiertos. Página 1:

Código HTML:

<html>
<body>
    <p><a href="pagina2.html#weblog-tools">Weblog Tools</a></p>
    <p><a href="pagina2.html#programming-languages">Programming Languages</a></p>
    <p><a href="pagina2.html#cool-stuff">Cool Stuff</a></p>
    <p><a href="pagina2.html#search-engines">Search Engines</a></p>
</body>
</html>
 

Página 2:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-EN">
<head>
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
    <script>
        $(function(){
            //analizar hash
            var el_activo = location.hash ? location.hash.split('#')[1] : false;
            if(el_activo){
                $('li.' + el_activo).addClass('expand');
            }
        });
    </script>
    <script src="menu.js" type="text/javascript"></script>
</head>
<body>
    <h2>2: Accordion with first submenu expanded at page load</h2>
 
    <ul class="menu">
        <li class="weblog-tools">
            <a href="#">Weblog Tools</a>
            <ul class="acitem">
                <li><a href="http://www.pivotx.net/">PivotX</a></li>
                <li><a href="http://www.wordpress.org/">WordPress</a></li>
                <li><a href="http://www.textpattern.com/">Textpattern</a></li>
                <li><a href="http://typosphere.org/">Typo</a></li>
            </ul>
        </li>
        <li class="programming-languages">
            <a href="#">Programming Languages</a>
            <ul class="acitem">
                <li><a href="http://www.php.net/">PHP</a></li>
                <li><a href="http://www.ruby-lang.org/en/">Ruby</a></li>
                <li><a href="http://www.python.org/">Python</a></li>
                <li><a href="http://www.perl.org/">PERL</a></li>
                <li><a href="http://java.sun.com/">Java</a></li>
                <li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li>
            </ul>
        </li>
        <li><a href="http://www.i-marco.nl/weblog/">Marco's blog (no submenu)</a></li>
        <li class="cool-stuff">
            <a href="#">Cool Stuff</a>
            <ul class="acitem">
                <li><a href="http://bookalicio.us/">Bookalicious</a></li>
                <li><a href="http://www.apple.com/">Apple</a></li>
                <li><a href="http://www.nikon.com/">Nikon</a></li>
                <li><a href="http://www.xbox.com/en-US/">XBOX360</a></li>
                <li><a href="http://www.nintendo.com/">Nintendo</a></li>
            </ul>
        </li>
        <li class="search-engines">
            <a href="#">Search Engines</a>
            <ul class="acitem">
                <li><a href="http://search.yahoo.com/">Yahoo!</a></li>
                <li><a href="http://www.google.com/">Google</a></li>
                <li><a href="http://www.ask.com/">Ask.com</a></li>
                <li><a href="http://www.live.com/?searchonly=true">Live Search</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>
 

[lockalt]

Funciona perfecto. Muchas gracias!!!