aplicar un expand all a mis links de archivos en mi blog

[laratik]

Hola Hildergarn, hace poco estuve trabajando en un menú acordeón, lo principal es tener una estructura de lista (como en casi cualquier menú):

Código HTML:

<ul class="acordeon" id="config">
        <li><h3 onselectstart='return false'>Ultimos usuarios</h3>
            <div>En costrucción...</div>
        </li>
        <li><h3 onselectstart='return false'>Ultimos Articulos</h3>
            <div>En costrucción...</div>
        </li>
        <li><h3 onselectstart='return false'>Ultimos widgets</h3>
            <div>En costrucción...</div>
        </li>
    </ul> 

El siguiente paso es ocultar mediante CSS los div que se encuentren dentro del menú:

Código CSS:

ul.acordeon {
    list-style: none;
    padding: 0;
}
 
ul.acordeon * {
    padding: 0;
    margin: 0;
}
 
ul.acordeon li h3 {
    background: url(../arrow_left.gif) no-repeat center right;
    color: #555;
    font-size: 12px;
    padding: 5px;
    cursor: pointer;
}
 
ul.acordeon li:hover {
    background: url(../bg_acordeon_over.gif);
}
 
ul.acordeon li {
    border: solid 1px #9ac1c9;
    background: url(../bg_acordeon.gif);
    padding:0;
    margin: 5px;
}
 
ul.acordeon div {
    display: none; //acá oculto el div
    background: #FFF;
    padding: 10px;
    border-top: solid 1px #9ac1c9;
}
 

El resto de CSS es solo para obtener el resultado visual que necesitaba. A continuación utilizo javascript para dejar visibles los divs:

Código Javascript:

function myo() {//document.getElementById().style
    var pa = this.parentNode;
    /*var ocu = pa.parentNode.getElementsByTagName("div");
    for(var i=0; i<ocu.length; i++) {
        if(ocu.item(i) != pa.getElementsByTagName("div").item(0)) {
            ocu.item(i).style.display = "none";
            ocu.item(i).parentNode.getElementsByTagName("h3").item(0).style.background = "url(images/arrow_left.gif) no-repeat center right";
        }
    }*/
    if(pa.getElementsByTagName("div").item(0).style.display == "block") {
        pa.getElementsByTagName("div").item(0).style.display = "none";
        this.style.background = "url(images/arrow_left.gif) no-repeat center right";//esto lo utilizo para cambiar una flecha hacia abajo por una hacia un lado
    } else {
        pa.getElementsByTagName("div").item(0).style.display = "block";
        this.style.background = "url(images/arrow_down.gif) no-repeat center right";//esto lo utilizo para cambiar una flecha hacia un lado por una hacia abajo
    }
}
 

El código que aparece comentado lo utilizo para que solo se muestre un solo div, de esta manera si doy click en otro head se oculta el div que se este visualizando y se muestra el nuevo. Por ultimo asigno la funcionalidad de mostrar divs a todos los h3 del menú:

Código Javascript:

var ac = getElementsByClassName("acordeon");
    for(var i=0; i<ac.length; i++) {
        var head = ac[i].getElementsByTagName("h3");
        for(var j=0; j<head.length; j++) {
            Event.add(head[j],"click",myo);
        }
    }
 

Resultado:




Conclusión:

Los pasos realmente importantes para crear el menú son:

1. Tener una estructura sobre la cual trabajar, las listas representan una buena opción.
2. Ocultar mediante CSS la parte colapsable del menú (en mi caso los divs)
3. mostrar y ocultar mediante javascript la parte colapsable del menú

Te puedo ayudar con un ejemplo más sencillo si así lo deseas.