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.
To start, learn from this video how to properly set up your sections:
Below is the code used in the video above:
$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(); } }
Now you can create a really cool custom collapsible section for your website! Have Fun!