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
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
Firstly, you need to do all header boxes from 1 onwards as the fold is classed as 0 and not 1.
Also, you need to get rid of the site plan options too as that image is already connected to your code through the fold container that the image is inside of.