Click button to show box

Ask the community
,
1

Hi, for the life of me I can’t figure out why this code isn’t working. Hoping someone can help me.

I have two buttons and two container boxes. I would like the content for each box to show when clicked, and have the other content hide when this happens.

export function communityEngagementButton_click(event) {
    $w("#communityEngagementBox").expand();
    $w("#communicationsBox").collapse();
}
export function communicationsButton_click(event) {
    $w("#menubox2").expand();
    $w("#communicationsBox").collapse();
}
export function communityEngagementBox_mouseOut(event) {
    $w("#communityEngagementBox").collapse();
}
export function communicationsBox_mouseOut(event) {
    $w("#communicationsBox").collapse();
}

I’ve also tried the following code to no avail.

export function communityEngagementButton_click(event) {
 if ($w("#communityEngagementBox").hidden) {
 $w("#communityEngagementBox").show();
 $w("#communicationsBox").hide();
    }
 else {
 $w("#communityEngagementBox").hide();
 $w("#communicationsBox").show();
    }

Nothing happens on click. Really confused, looking for some help!

2

Try this inside on.Ready:

the box must be collapsed by default

$w(“#button”).onClick(()=>{
if( $w(“#box”).collapsed ) {
$w(“#box”).expand();

}else { 
   $w("#box").collapse(); 
}

})

3

Check the following:

  • Export functions must be added through the properties panel of the button otherwise it won’t work.

  • As another reason, your button can be linked through its setting or its click action can be connected to data, which can cause conflict with your event handler.

4

Thanks for your help. Unfortunately, still no luck. Here is what my code looks like currently, with both boxes set to collapsed by default.

$w.onReady(function () {

    $w("#communityEngagementButton").onClick(()=>{
    if( $w("#communityEngagementBox").collapsed ) {
        $w("#communityEngagementBox").expand();


    }else {
       $w("#communityEngagementBox").collapse();
    }
})


export function #communityEngagementButton_click(event) {
    $w("#communityEngagementBox").expand();
    $w("#communicationsBox").collapse();
}
export function #communicationsButton_click(event) {
    $w("#communicationsBox").expand();
    $w("#communityEngagementBox").collapse();
}

});
5

Thank you for this. I started from scratch and added the export functions via the properties panel and it’s now working. :slight_smile: