Show/Hide elements on button click

Ask the community
,
1

Hi, I’ve read many other similar posts on this but it doesn’t seem to work for me. Here’s what I’m trying to do…
I am trying to make a text box to replace the original text on page load when I click a button. Clicking another button on the page will replace that text to show another text box.
e.g. When I click #rescueButton, #rescueText will appear, #animalServicesText will be hidden. The button will then change it’s fill colour. (I created a duplicate button, #rescueButtonSelected for this)

My current code is:

export function rescueButton_click ( event ) {
let isHidden = $w ( “#rescueText” ). hidden ; // false
if ( $w ( “#rescueText” ). hidden ) {
$w ( “#rescueText” ). show ();
$w ( “#rescueButtonSelected” ). show ();
$w ( “#animalServicesText” ). hide ();
}
else {
$w ( “#rescueText” ). hide ();
$w ( “#rescueButtonSelected” ). hide ();
$w ( “#animalServicesText” ). show ();
}
}

Right now, nothing happens when I run this code. Am I missing anything?

Thank you in advance for any help!

1 Like
2 
$w.onReady(()=>{
	$w('#rescueButton').onClick(()=>{
		if($w("#rescueText").hidden) {
			$w("#rescueText").show();
			$w("#rescueButtonSelected").show();
			$w("#animalServicesText").hide();
		}
		else{
			$w("#rescueText").hide();
			$w("#rescueButtonSelected").hide();
			$w("#animalServicesText").show();
		}
	});	
});
3

Thank you Code-Ninja for this. It has worked brilliantly for the first button! However, I have three buttons, is there a way for it to show another textbox when a second button, #transportButton, is clicked and so on?

is there a way to also hide the text if I click the respective highlighted button again?

e.g.
Click #rescueButton, show #rescuetext and #rescueButtonSelected
Click #transportButton, show #transportText and #transportButtonSelected
Click #husbandryButton, show #husbandryText and #husbandryButtonSelected

then if I click #rescueButtonSelected (after I clicked #rescueButton), then it hides #rescuetext and so on…

4

Thanks for this solution. https://www.cfa-home.net/

5

In a simple COPY and PASTE CODING…

$w.onReady(()=>{
    //Rescue-Button
    $w('#rescueButton').onClick(()=>{
        if($w("#rescueText").hidden) {
            $w("#rescueText").show();
            $w("#rescueButtonSelected").show();
            $w("#animalServicesText").hide();
        }
        else{
            $w("#rescueText").hide();
            $w("#rescueButtonSelected").hide();
            $w("#animalServicesText").show();
        }
    }); 

    //Transport-Button...
    $w(' #transportButton').onClick(()=>{
        if($w("#transportText").hidden) {
            $w("#transportText").show();
            $w("#transportButtonSelected").show();
            $w("#animalServicesText").hide();
        }
        else{
            $w("#transportText").hide();
            $w("#transportButtonSelected").hide();
            $w("#animalServicesText").show();
        }
    }); 

    //Husbandry-Button...
    $w('#husbandryButton').onClick(()=>{
        if($w("#husbandryText").hidden) {
            $w("#husbandryText").show();
            $w("#husbandryButtonSelected").show();
            $w("#animalServicesText").hide();
        }
        else{
            $w("#husbandryText").hide();
            $w("#husbandryButtonSelected").hide();
            $w("#animalServicesText").show();
        }
    }); 
});