Hi, i tried creating a price list for my website.
The objective is to provide a clean and tidy outlook which displays the prices (as text) for a particular type of floor plan and which stack of the development (as image) is it located at.
I used the code from this tutorial
https://www.wix.com/corvid/example/collapse-elements?dvc=c&experiment_id=wix%2Bcode%5Ee%5E209150830980%5E1t1%3B%3Fh&gclid=EAIaIQobChMI7bae8Jzc3AIVGYfVCh0nWgKzEAAYASAAEgJTmPD_BwE&h=https%3A%2F%2Fwww.wix.com%2Fcode%2Fhome&utm_campaign=179424220%5E47357753009&utm_medium=cpc&utm_source=google
and it works accordingly when I was just working with the prices (as text) but when I include the image to show the stack placings, it doesn’t toggle accordingly.
Please help and many thanks
This is the code i used
function toggleFold(index) {
let $fold = $w(‘#fold’ + index);
let $arrowDown = $w(‘#arrowDown’ + index);
let $arrowRight = $w(‘#arrowRight’ + index);
let $sitePlan = $w(‘#sitePlan’ + index);
// toggle the fold at the index
if ($fold.collapsed) {
$fold.expand();
$arrowDown.show();
$arrowRight.hide();
$sitePlan.expand();
}
else {
$fold.collapse();
$arrowDown.hide();
$arrowRight.show();
$sitePlan.collapse();
}
// collapse the other folds
[2,3,4]
.filter(idx => idx !== index)
.forEach(idx => {
$w(‘#fold’ + idx).collapse();
$w(‘#sitePlan’ + idx).collapse;
$w(‘#arrowDown’ + idx).hide();
$w(‘#arrowRight’ + idx).show();
})
}
export function headerBox2_click(event) {
toggleFold(2);
}
export function headerBox3_click(event) {
toggleFold(3);
}
export function headerBox4_click(event) {
toggleFold(4);
}
And this is the page to understand what I am trying to say
https://shunxiongkoh.wixsite.com/mysite-2/copy-of-enquires-1