top of page

Collapsible Sections with Velo

Updated: Jun 19



Velo Code:


$w.onReady(function () {
    	$w('#stepOneCollapseButton').onClick(() => {
        		toggleBox($w('#stepOneCollapibleStrip'), $w('#stepOnePlusSign'),       $w('#StepOneMinusSign'));
    });
    	$w('#stepTwoCollapseButton').onClick(() => {
        		toggleBox($w('#stepTwoCollapibleStrip'), $w('#stepTwoPlusSign'), $w('#StepTwoMinusSign'));
    });
    	$w('#stepThreeCollapseButton').onClick(() => {
       			toggleBox($w('#stepThreeCollapibleStrip'), $w('#stepThreePlusSign'), $w('#StepThreeMinusSign'));
    });
});

function toggleBox(boxElement, plusSign, minusSign) {
    	const isCollapsed = boxElement.collapsed;
    	if (isCollapsed) {
        	plusSign.hide();
        	minusSign.show();
        	boxElement.expand();
    } else {
        	minusSign.hide();
        	plusSign.show();
        	boxElement.collapse();
    }
}

Enjoy!

Comments


bottom of page