Hey! NUEVO VIDEO. En este video, aprenderás como colapsar secciones en Wix usando un poco de Velo Code. No olvides subscribirte y comentar alguna pregunta!
CÓDIGO PARA SECCIONES ESTÁTICAS
$w.onReady(function () { $w('#newYorkCollapseButton').onClick(() => { toggleBox($w('#newYorkCollapsibleBox'), $w('#newYorkPlusSign'), $w('#newYorkMinusSign')); }); $w('#tokyoCollapseButton').onClick(() => { toggleBox($w('#tokyoCollapsibleBox'), $w('#tokyoPlusSign'), $w('#tokyoMinusSign')); }); $w('#parisCollapseButton').onClick(() => { toggleBox($w('#parisCollapsibleBox'), $w('#parisPlusSign'), $w('#parisMinusSign')); }); }); function toggleBox(boxElement, plusSign, minusSign) { const isCollapsed = boxElement.collapsed; if (isCollapsed) { plusSign.hide(); minusSign.show(); boxElement.expand(); } else { minusSign.hide(); plusSign.show(); boxElement.collapse(); } }
CÓDIGO PARA SECCIONES DINÁMICAS (REPETIDOR Y DATASET)
$w.onReady(function () { $w('#collapseButton').onClick( (event) => { const $item = $w.at(event.context); if ($item('#minusSign').hidden) { $item('#placeCollapsibleBox').expand(); $item('#plusSign').hide(); $item('#minusSign').show(); } else { $item('#placeCollapsibleBox').collapse(); $item('#plusSign').show(); $item('#minusSign').hide(); } } ); $w("#btnExpand").onClick((event)=>{ const $item = $w.at(event.context); if ($item('#imageRecipe').collapsed) { $item('#imageRecipe').expand(); $item('#textDescription').expand(); $item('#btnCollapse').expand(); $item("#btnExpand").collapse(); } }) $w("#btnCollapse").onClick((event)=>{ const $item = $w.at(event.context); if ($item('#imageRecipe').isVisible) { $item('#imageRecipe').collapse(); $item('#textDescription').collapse(); $item('#btnCollapse').collapse(); $item("#btnExpand").expand(); } }) });