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'));
});
});
functiontoggleBox(boxElement,plusSign,minusSign){
constisCollapsed=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!
Comments