Hay una configuración del módulo de acordeón de Divi que no se puede hacer de serie pero que es muy interesante: mostrar todas las cajas o elementos del acordeón cerradas inicialmente.
Divi permite escoger cuál queremos que esté abierta pero no que todas estén cerradas.
Uno de los trucos para resolverlo era crear un primer elemento vacío y después ocultarlo por CSS con un display:none. No es una buena opción, ya deberías saber que a Google no le gustan esas cosas que se cargan y después no se muestran 😬.
Para hacerlo bien, podemos añadir un script que resuelve este problema.
Veamos cuál es el punto de partida:
El de la imagen es el estado de un módulo de acordeón de serie. Como ves, el primer módulo aparece por defecto desplegado. ¿Cómo hacer que aparezca exactamente igual que los otros dos?
Para ello vamos a añadir un script en un nuevo módulo a la página. Preferiblemente por encima del acordeón (por el orden de carga).
El tipo de módulo será el de Código.
En este módulo incluimos el script que se encargará de colapsar todos lo módulos. Este es el código que debes incluir:
<script>
jQuery(function($){
$('.et_pb_accordion .et_pb_toggle_open').addClass('et_pb_toggle_close').removeClass('et_pb_toggle_open');
$('.et_pb_accordion .et_pb_toggle').click(function() {
$this = $(this);
setTimeout(function(){
$this.closest('.et_pb_accordion').removeClass('et_pb_accordion_toggling');
},700);
});
});
</script>
Y así es cómo debería quedar en tu constructor de Divi:
Aunque en la previsualización del constructor visual no notarás ninguna diferencia, haz una vista previa tradicional de la página (o guárdala directamente) y comprobarás que ya aparecen todos los elementos cerrados.
Si ahora haces clic en uno de los elementos, se desplegará y se producirá la situación estándar. Es decir no podrás volver a cerrar todos al mismo tiempo salvo que recargues la página.
Es una pega del script, pero su importancia es muy pequeña en la mayoría de los casos.
Si te apetece seguir tuneando módulos de Divi te invito a descubrir cómo meter los títulos de las barras dentro de cada una en el módulo de Contador de barras.
