Hey there!
I’m trying to create a collapsing effect on a page, though it’s not working properly. The scenario is as follows:
I’ve 3 columns on the same page, each column following the same logic.
- Main title
- Secondary title
- Arrow (added feature)
- Text
- Button (added feature - to be linked to a different page by click)
I pretend to hid the text and the button, so they’re only visible when someone clicks on the arrow. By clicking on the arrow the text should show downward as well the button.
Unfortunately, I cannot make it work the way I’d like. I’ve used the collapse and expand function (see example below), the text and button collapse, though 2 issues arise:
- Button is inactive (it’s greyed out)
- Column size does not match the text length, meaning that there is a big empty space before one clicks on the arrow that just sits there the whole time. The idea is for the column to become bigger the minute one clicks on the arrow and the text shows, and then retracts again with a second click making the text (and the button) disappear.
export function Arrow2_click(event) {
//Add your code for this event here:
if ( $w(“#Text2”).collapsed ) {
$w(“#Text2”).expand()
$w(“#Button2”).expand();
}
else {
$w(“#Text2”).collapse()
$w(“#Button2”).collapse();
}
}
Could someone help me out?
Would be more than glad to provide additional clarifications.
Thank you so much!!
Diana
