Click Show, Click Hide

Ask the community
,
1

Hi!
I’m new at this - have got different items/IDs to show or hide on a click. I get that.

Now I would like to have it so that the same ID onclick event will toggle show/hide for the same $w(…

In other words: 1. Click on an icon - show an illustration. 2. Click on that same icon - hide that icon.

Can anyone help? Many thanks!

1 Like
2

Hi Paul,

Take a look at the Hide and Show Elements example. It’s just what you’re looking for.

Have fun,

Yisrael

3

Hi Yisrael,

Unfortunately this doesn’t do what I am looking for, but I think it’s an alternative I can work with.

Thanks.
Paul

4

Well, I realize that the example isn’t what you need for your project. What I meant was that the concepts demonstrated in the example are just what you need. You can use the techniques shown and apply them to your own app.

Have fun!

5

I am looking for the same thing, I need the same object when clicked to toggle show/hide.

Any thoughts?

6

I’m also looking for this… I’ve read that same article, but need the same icon to be able to show and hide another image/element each times it’s clicked.

Can someone help?

7

I did this by creating two copies of the icon to be clicked and placing them directly on top of each other with one being hidden on load. When the first icon (the one visible when the page loads) is clicked the info box is shown, the first icon is hidden, and the second icon is shown. Then when the second icon is clicked the info box is hidden, the second icon is hidden, and the first icon is shown.

The code I used is below. Please note: I had to go into the Properties Box for each of the icons before entering the code and click on the + next to onClick to create a function. The functions that were assigned were called infocircle1_click and infocircle2_click. I then used them in my code.

All this code is entered above $w.onReady( function ().

CODE START:

let fadeOptions = {
“duration”: 350,
“delay”: 0

};

export function infocircle1_click(event) {
/Show info box when icon (#infocircle1) is clicked
Then hide icon #infocircle1 and show icon #inforcircle2
(icons look excactly the same and are in the same location)/
$w(“#BudgetInfoBox”).show(“fade”, fadeOptions);
$w(‘#infocircle1’).hide();
$w(‘#infocircle2’).show();
}

export function infocircle2_click(event) {
/Hide info box when icon (infocirclehide) is clicked
Then hide icon #infocircle2 and show icon #inforcircleshow
(icons look excactly the same and are in the same location)/
$w(“#BudgetInfoBox”).hide(“fade”, fadeOptions);
$w(‘#infocircle2’).hide();
$w(‘#infocircle1’).show();
}

$w.onReady( function () {
//TODO: write your page related code here…

});