Click button to show box

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!

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(); 
} 

})

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.

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();
}

});

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