Collapsible Sections with Velo

Nov 24, 2021
1 min read

If you want to create a custom FAQ section, step-by-step guide, or want to provide your users with more information when they toggle a dropdown section, then this is a great addition to your website.

$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(); } }