Button event function help - text won't hide

Ask the community
,
1

I would like to use a button to reveal a text block on first click and hide it on second click. I have managed to make the text appear, but the second click makes the button – but not the text-- hide.

Do I need a separate event function to make it hide? Something else? Thanks in advance for helping me fix my broken code.


 
// Ed
let fullText1;  
let shortText1; 
// Aud
let fullText2;  
let shortText2; 

$w.onReady(function () {
//Ed
 const shortText1Length = 0;
    fullText1 = $w("#text22").text;
    shortText1 = fullText1.substr(0, shortText1Length) + "";
    $w("#text22").text = shortText1;
//Aud
const shortText2Length = 0;
fullText2 = $w("#text20").text;
shortText2 = fullText2.substr(0, shortText2Length) + "";
$w("#text20").text = shortText2;

});

//export functions here
//Ed
export function button1_click(event, $w) {
 if ($w("#text22").text === shortText1) {
        $w("#text22").text = fullText1;
        $w("#button1").label = "Hide his bio";
    } else {
        $w("#text22").text = shortText1;
        $w("#button1").label = "Read his bio";
    }
 if ($w("#text22").text === shortText1) {
        $w("#text22").text = fullText1;
        $w("#button1").collapse();
    }}

//Aud
 export function button2_click(event, $w) {
 
 if ($w("#text20").text === shortText2) {
            $w("#text20").text = fullText2;
            $w("#button2").label = "Hide her bio";
        } else {
            $w("#text20").text = shortText2;
            $w("#button2").label = "Read her bio";
        }
 if ($w("#text20").text === shortText2) {
            $w("#text20").text = fullText2;
            $w("#button2").collapse();
        }}
2

If you want to completely hide the text (and not to display any short text), it’s better to throw away the code above and use the following code instead:

export function button1_click(event) {
    if($w("#text22").collapsed){
        $w("#text22").expand();
        $w("#button2").label = "Hide his bio";
    } else {
         $w("#text22").collapse();
         $w("#button2").label = "Read his bio"; 
    }
}
//and do the same to the other text
3

Thanks. I had to set the text to collapse on load, but then your code worked like a charm. Thanks.

$w.onReady(function () {
    $w("#text22").collapse();
});
4

@jaymekfraser you’re welcome. instead of that, you can set the text to be collapsed by default via the property panel. but your way is fine too.

5

@jonatandor35 Well, I was wrong. My way only works for the first two buttons and not the rest. If I use the property panel to set them to load as collapsed, the buttons don’t work.

6

@jaymekfraser both ways should work. If it didn’t work for you, it means you did something wrong (either in the code or on the property panel).