Lista desplegable en Wix
- 14 ene 2022
- 1 min de lectura
Hoy vamos a ver cómo crear una lista desplegable en Wix usando código. Esta función es especialmente útil para sitios web con mucha información. Una página con subelementos desplegables siempre se ve más ordenada y visualmente equilibrada.
Ver ejemplo >
Descripción del ejemplo de la lista desplegable
Este ejemplo muestra cómo integrar una lista desplegable (colapsable) en tu sitio web. Los elementos de la página abren secciones del menú cuando la persona hace clic en una de las flechas. Los ítems de cada sección del menú están dentro de un contenedor (box).
Tené en cuenta que al abrir o cerrar el contenedor se afectan todos los elementos dentro de él, por lo que no hace falta expandir o contraer cada ítem de forma individual.
Código para la lista desplegable
Copiá el código para crear tu propia lista.
function toggleFold(index) {
let $fold = $w('#fold' + index);
let $arrowDown = $w('#arrowDown' + index);
let $arrowRight = $w('#arrowRight' + index);
// toggle the fold at the index
if ($fold.collapsed) {
$fold.expand();
$arrowDown.show();
$arrowRight.hide();
} else {
$fold.collapse();
$arrowDown.hide();
$arrowRight.show();
}
// collapse the other folds
[1, 2, 3, 4]
.filter(idx => idx !== index)
.forEach(idx => {
$w('#fold' + idx).collapse();
$w('#arrowDown' + idx).hide();
$w('#arrowRight' + idx).show();
})
}
export function headerBox1_onClick(event) {
toggleFold(1);
}
export function headerBox2_onClick(event) {
toggleFold(2);
}
export function headerBox3_onClick(event) {
toggleFold(3);
}
export function headerBox4_onClick(event) {
toggleFold(4);
}
