I've added 6 multistage boxes to my services page, the first 2 work, the next 4 I added won't open in preview

Ask the community
1

I’ve have 3 services, so below these I have added multistage boxes to show ‘what’s included’ and ‘pricing’, so 6 in total. The first two I added work fine, but the next 4 don’t.

Also, when I expand the 2 that work in ‘preview’, it expands the space below the other boxes that are horizontal to it, even though they are not open. Is there a way to stop this?

Here is the code I have used:

$w.onReady(function () {
$w(‘#SmmPlus1’).onClick(() => {
$w(‘#SmmBox1’).changeState(“expanded”);
})
$w(‘#SmmMinus1’).onClick(() => {
$w(‘#SmmBox1’).changeState(“collapsed”);
})

$w('#SmmPlus2').onClick(() => {
	 $w('#SmmBox2').changeState("State2");
})
$w('#SmmMinus2').onClick(() => {
	 $w('#SmmBox2').changeState("State1");
})

$w('#FpPlus1').onClick(() => {
	 $w('#FpBox1').changeState("State2");
})
$w('#FpMinus1').onClick(() => {
	 $w('#FpBox1').changeState("State1");
})

$w('#FpPlus2').onClick(() => {
	 $w('#FpBox2').changeState("State4");
})
$w('#FpMinus2').onClick(() => {
	 $w('#FpBox2').changeState("State3");
})

$w('#ItPlus1').onClick(() => {
	 $w('#ItBox1').changeState("State6");
})
$w('#ItMinus1').onClick(() => {
	 $w('#ItBox1').changeState("State5");
})

$w('#ItPlus2').onClick(() => {
	 $w('#ItBox2').changeState("State8");
})
$w('#ItMinus2').onClick(() => {
	 $w('#ItBox2').changeState("State7");
})

});