Open Strip onClick via button

Discussion Ask a question
,
1

I’ve been attempting to edit the Collapse Elements example, but stuck on swapping out the container for a button. I have my button named ‘coachButton1’. I would like to click this button to show a strip named ‘fold1’.

This is the example code… how do I change the container/arrow to a simple button here? Thanks in advance.

function toggleFold(index) {

	let $fold = $w('#fold' + index);

	let $arrowDown = $w('#arrowDown' + index);

	let $arrowRight = $w('#arrowRight' + index);

	// toggle the fold at the index

	if ($fold.collapsed) {

		$fold.expand();

		$arrowDown.show();

		$arrowRight.hide();

	}

	else {

		$fold.collapse();

		$arrowDown.hide();

		$arrowRight.show();

	}

	// collapse the other folds

	[1,2,3,4]

		.filter(idx => idx !== index)

		.forEach(idx => {

			$w('#fold' + idx).collapse();

			$w('#arrowDown' + idx).hide();

			$w('#arrowRight' + idx).show();

		})

}



export function coachButton1_onClick(event) {

	toggleFold(1);

}



export function coachButton2_onClick(event) {

	toggleFold(2);

}



export function coachButton3_onClick(event) {

	toggleFold(3);

}



export function coachButton4_onClick(event) {

	toggleFold(4);

}
2

You are using the example and code from here.
https://www.wix.com/corvid/example/collapse-elements

function toggleFold(index) {
let $fold = $w('#fold' + index);
let $arrowDown = $w('#arrowDown' + index);
let $arrowRight = $w('#arrowRight' + index);
// toggle the fold at the index
if ($fold.collapsed) {
$fold.expand();
$arrowDown.show();
$arrowRight.hide();
}
else {
$fold.collapse();
$arrowDown.hide();
$arrowRight.show();
}
// collapse the other folds
[1,2,3,4]
.filter(idx => idx !== index)
.forEach(idx => {
$w('#fold' + idx).collapse();
$w('#arrowDown' + idx).hide();
$w('#arrowRight' + idx).show();
})
}

export function headerBox1_onClick(event) {
toggleFold(1);
}

export function headerBox2_onClick(event) {
toggleFold(2);
}

export function headerBox3_onClick(event) {
toggleFold(3);
}

export function headerBox4_onClick(event) {
toggleFold(4);
}
3

You need all of the code for the toggleFold functions to work with the headerBoxes as they are all contained within the headerBoxes themselves and are all linked to them.

So, to do it with buttons you would need to do the buttons outside of the headerBoxes, so that they are not attached to them.

However, this will now allow the user to click on the headerBox, the arrows or the additional buttons to expand and collapse the sections.

So, this is something that you are not wanting to have as per your post.

See in this quick mock up example here.
https://givemeawhisky.wixsite.com/foldtest

With the code on the page setup as this:

function toggleFold(index) {
let $fold = $w('#fold' + index);
let $arrowDown = $w('#arrowDown' + index);
let $arrowRight = $w('#arrowRight' + index);
// toggle the fold at the index
if ($fold.collapsed) {
$fold.expand();
$arrowDown.show();
$arrowRight.hide();
}
else {
$fold.collapse();
$arrowDown.hide();
$arrowRight.show();
}
// collapse the other folds
[1,2,3,4]
.filter(idx => idx !== index)
.forEach(idx => {
$w('#fold' + idx).collapse();
$w('#arrowDown' + idx).hide();
$w('#arrowRight' + idx).show();
})
}

export function headerBox1_click(event) {
toggleFold(1);
}

export function headerBox2_click(event) {
toggleFold(2);
}

export function headerBox3_click(event) {
toggleFold(3);
}

export function headerBox4_click(event) {
toggleFold(4);
}

export function button1_click(event) {
toggleFold(1);
}

export function button2_click(event) {
toggleFold(2);
}

export function button3_click(event) {
toggleFold(3);
}

export function button4_click(event) {
toggleFold(4);
}
4

So to have the workaround for the buttons only, you would need to get rid of the code for the arrows and the code for the headerBoxes, as well as deleting the arrows or simply making them the same colour as the headerBoxes so that they don’t show.

Plus, make sure that you take off all the onClick event functions for the headerBoxes and all the arrows too.

Then you will only have the buttons setup to allow the user to expand and collapse the sections as shown on this page here.
https://givemeawhisky.wixsite.com/foldtest/buttons-only

With the code being like this:

function toggleFold(index) {
let $fold = $w('#fold' + index);
// toggle the fold at the index
if ($fold.collapsed) {
$fold.expand();
}
else {
$fold.collapse();
}
// collapse the other folds
[1,2,3,4]
.filter(idx => idx !== index)
.forEach(idx => {
$w('#fold' + idx).collapse();
})
}

export function button1_click(event) {
toggleFold(1);
}

export function button2_click(event) {
toggleFold(2);
}

export function button3_click(event) {
toggleFold(3);
}

export function button4_click(event) {
toggleFold(4);
}
5

@givemeawhisky Thank you for that excellent walk-thru! I think I follow; let me work with the code and I’ll report back.

6

@givemeawhisky Works perfectly, thank you again.

Next question related to this… how do I get my Page to be dynamic? As of now, my page shows a blank are where the expansion will occur. For simplicity, is there a means of collapsing the Page up to the Button?

7

I think I’ve figured it out… use Containers instead of Strips