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

[Hildergarn]

Hola. Ciertamente tengo pocos conocimientos de javascript y jquery, así que les pido su ayuda en lo siguiente por favor:

Quiero que la sección de archivos en mi website de viajes (hospedado en blogger)

http://www.viajesycosasasi.com/p/archivos.html

cuente con la opción de expandir/colapsar los enlaces de post tal como aparece en este site

http://www.wanderingearl.com/archives/

Intenté tratando de poner el código jquery como aparece en dicho site, hice varias pruebas pequeñas, pero nada que me funciona.

Les agradezco cualquier comentario o ayuda.

saludos

[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.

[Hildergarn]

Se ve bueno el código, aunque voy a probarlo primero en localhost a ver si puede funcionar en mi blog. Trataré de mantener el resultado simple, sin imágenes de fondo ni nada llamativo, sólo que despliegue los links tal cual como los tengo en mi página.

Si tienes el resultado que pusistes online, para yo verlo, sería buenísimo :)

Gracias por la ayuda.

[laratik]

Como te lo menciones ese es un proyecto que estoy trabajando y aun se encuentra en localhost, aunque he subido un demo a http://mirdware.co.cc/, espero que te sea de ayuda.

[Hildergarn]

Que tal. Te comento que, después de varios testeos en localhost, pude subir la lista a mi site, pero con un gran inconveniente, el cual explicaré a ver si me ayudan:

si visitan la sección de archivos de mi website pude colocar los links a modo de "acordeón". Únicamente funcionan si clickean sobre Expandir/Cerrar, porque si lo hacen sobre los meses no funciona, cosa que no debería suceder porque lo probé en localhost y me funciona de maravilla.

Les dejo los siguientes código para que sepan como está todo estructurado:

Un mes en esa página está programado de la siguiente forma

Código HTML:

<li><span class="yearmes">Julio 2011</span>
<ul class="lista_archivos">
<li><a href="http://www.viajesycosasasi.com/2011/07/el-puente-reina-juliana-curacao.html">El puente Reina Juliana, Curaçao</a></li>
<li><a href="http://www.viajesycosasasi.com/2011/07/los-pros-y-contras-de-un-viaje-de-larga.html">Los pros y contras de un viaje de larga duración</a></li>
<li><a href="http://www.viajesycosasasi.com/2011/07/viajar-igual-que-los-demas-es-lo-ideal.html">Viajar igual que los demás, ¿es lo ideal?</a></li>
<li><a href="http://www.viajesycosasasi.com/2011/07/de-vuelta.html">De vuelta</a></li>
</ul>
</li>
 

El código javascript que tengo para que aparezcan los enlaces es este

Código Javascript:

<script type='text/javascript'>
        /* <![CDATA[ */
            jQuery(document).ready(function() {
                jQuery('.colapsar').find('.lista_archivos').hide();
                jQuery('.colapsar').find('.lista_archivos:first').hide();
                jQuery('.colapsar').find('.yearmes').click(function() {
                    jQuery(this).next('ul').slideToggle('fast');
                });
                jQuery('.colapsar').find('.linkmadre').click(function() {
                    if ( 'Expandir' == jQuery(this).text() ) {
                        jQuery(this).parent('.contenedor').find('.lista_archivos').show();
                        jQuery(this).text('Cerrar');
                    }
                    else {
                        jQuery(this).parent('.contenedor').find('.lista_archivos').hide();
                        jQuery(this).text('Expandir');
                    }
                    return false;
                });
            });
        /* ]]> */
    </script>
 

este es el llamado al archivo jquery:

Código Javascript:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
 

No se en verdad que puede ser. Como dije, en localhost todo me funciona bien, pero online no. Cualquier ayuda se las agradezco.

Saludos