abrir/cerrar un menú entero con un solo click

[ruben-et]

Buenos días a tod@s.
He estado buscando por aqui pero no he encontrado ningún tema asociado. Lanzo la pregunta.
Tengo un menu con tres niveles de submenus hechos con spry objects, en concreto collapsible panel o panel que se puede contraer, hecho en DW CS3.
La cuestion es que quiero poner dos botones "desplegar todo" "plegar todo",por supuesto que estén activos cuando el panel se encuentre plegado o desplegado respectivamente.
este es el código que genera el DW CS3 al añadir el menú:

Código:

    <div id="CollapsiblePanel1" class="CollapsiblePanel" >
      <div class="CollapsiblePanelTab" tabindex="0">Menu1</div>
      <div id="CollapsiblePanel2" class="Level2">
            <div class="CollapsiblePanelTab" tabindex="0">SubMenu1</div>
             <ul>
                  <li><a href="LINK" target="_blank">Opcion1</a></li>
             </ul>
             <div id="CollapsiblePanel3" class="Level3">
                    <div class="CollapsiblePanelTab" tabindex="0">SubMenu2</div>
                     <ul>
                     <li><a href="LINK" target="_blank" >Opcion1</a></li>
                     </ul>
              </div>
              <div id="CollapsiblePanel4" class="Level3">
                     <div class="CollapsiblePanelTab" tabindex="0">SubMenu3</div>
                     <ul>
                          <li><a href="LINK" target="_blank">Opcion1</a></li>
                          <li><a href="LINK" target="_blank">Opcion2</a></li>
                     </ul>
              </div>
              <div id="CollapsiblePanel7" class="Level3">
                     <div class="CollapsiblePanelTab" tabindex="0">SubMenu4</div>
                     <ul>
                     <li><a href="LINK" target="_blank">Opcion1</a></li>
                     </ul>
               </div>
          </div>
     </div>
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false, enableAnimation:false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false, enableAnimation:false});
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", {contentIsOpen:false, enableAnimation:false});
var CollapsiblePanel4 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel4", {contentIsOpen:false, enableAnimation:false});
var CollapsiblePanel7 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel7", {contentIsOpen:false, enableAnimation:false});
//-->
</script>

Supongo que se tendrá que hacer con java o si es desde el DW no se como hacerlo.
Por favor si alguien me puede ayudar con esto estaré muy agradecido

Gracias

[ruben-et]

Ayuda!!
Ayuda!!

[hector2c]

mm, debes encontrar un criterio para poder mostrar, creo que encontre uno, si te fijas, todos los menus empiezan con: CollapsiblePanel## verdad?

puedes usar jQuery, para mostrarlos:

Código HTML:

<script>
  $(document).ready(function(){
    $("input:button").click(function(){
      $("div[id^='CollapsiblePanel']").show();
    });
  });
</script>
<input type="button"> 

espero te sirva, nos vemos!!!

otro modo en jQuery, puede ser almacenar todo el menu en un div, y luego darle .show() a todos los divs que contenga el div contenedor, suerte!!!

[hector2c]

tambien pueden seleccionarse con esto:

Código:

$("div[name*='CollapsiblePanel']").show();

[ruben-et]

Hola Hector, gracias por tu respuesta pero no funciona.
he estado probando algunas cosas, por ejemplo la propiedad .show la he cambiado por .open ya que en el .js del elemento que genera el DW solo aparece .open. Por otro lado cuando abres la página indica un error en la línea $(document).ready(function(){, dice que se esperaba un objeto ?¿?¿
Lo que he hecho es copiar el texto que me has escrito tu y a continuación añadir el botón, todo esto dentro del div del menú.
Mis conocimientos de java son muy muy escasos y seguramente no estoy haciendo algo bien.
Gracias de nuevo

[ruben-et]

alguine me ayuda con esto?

[ruben-et]

ayuda
ayuda