Reveal collapsed strips with button, one-by-one

Discussion Ask a question
,
1

To be brief, I am creating a custom order request form for a site and I need to be able to reveal 5 different strips that are collapsed on load. Each strip contains drop boxes and other user input for ordering product and counts as 1 “item”.
I’ve defined an array before the $w.onReady:

let orderItem = [“#item1”,“#item2”,“#item3”,“#item4”,“#item5”]

I’m calling the function as so:

$w(“#addItemButton”).onClick((event)=> {
addNewItem();
});

and I’ve written the function:

function addNewItem(){
for (let i=0; i<4; i++){
$w(orderItem[i]).expand;
}
//each time a member presses the button I want a strip to expand…
if ($w(orderItem[4]).visible){
$w(“#addItemButton”).disable;
$w(“#itemLimitError”).expand;
}
//…until all 5 strips are visible, then they can’t add anymore items and a text box expands
else {
$w(“#addItemButton”).enable;
}
}

Nothing happens when I press the button. I am pretty new to coding so I don’t know if the array is really the best option for what I am trying to achieve.

Also I seem to have an issue with the collapse property. I’ve marked strips as collapsed when the page loads yet the page is still just as long with empty space where the collapsed strips are. The strips are parents for multiple user input boxes, if these are not marked as collapsed as well, does it cause the issue I am describing?

Anyways, thanks for any help

2

You should use boxes instead of strips for this to avoid the empty gaps. The property is .isVisible, not .visible . Lastly, a for loop is probably not what you want here, because if your code was working it would just open them all at once, not one by one.

You could use something like this instead:

let i = 0;
export function button_click(event) {
i++;
(i !== 6) ? $w(‘#item’+i).expand() : $w(‘#button’).disable();
}

1 Like
3

For the collapse function there are already examples by Wix which will help you with things like this, like this one that is shown in Wix Editor all fully made up and with all the code ready too, which automatically collapses and opens elements as and when they are clicked:
https://www.wix.com/corvid/example/collapse-elements

Or this tutorial:
https://codequeen.wixsite.com/double-collapse/double-collapse-code
Video of above tutorial:
https://www.youtube.com/watch?v=HmTkf5af0NE&list=PLMIjZvOuof0K5UZ1aXoyBPhoUDPWfTPyy&index=18

Wix Api’s:
https://www.wix.com/corvid/reference/$w.HiddenMixin.html
https://www.wix.com/corvid/reference/$w.CollapsedMixin.html

1 Like