Collapsed Box = Anchors below shifted

Dear All,

On my page, I have two collapsed boxes on page load and I use the following codes to expand or collapse them on buttons click:

export function Button1_click(event, $w) {
if ( $w(“#Box1”).collapsed ) {
$w(“#Box1”).expand();
$w(“#ImageRound1”).show();
$w(“#ImageTriangle1”).hide();
}
else {
$w(“#Box1”).collapse();
$w(“#ImageRound1”).hide();
$w(“#ImageTriangle1”).show();}
}

export function Button2_click(event, $w) {
if ( $w(“#Box2”).collapsed ) {
$w(“#Box2”).expand();
$w(“#ImageRound2”).show();
$w(“#ImageTriangle2”).hide();
}
else {
$w(“#Box2”).collapse();
$w(“#ImageRound2”).hide();
$w(“#ImageTriangle2”).show();}
}

But I encounter two issues:

  1. Because the collapsed boxes, there is a big space at the bottom of my page, between the last element of my page and the footer.

  2. And all the anchors below the collapsed boxes are shifted.

What I did wrong?

Thank you for your help.
Best Regards,
Domivax

1 Like