show / hide toggle

[ptr...@googlemail.com]

I am mainly using GWD for basic animations so, to date, I haven't needed to know much about code.

However, now I am stuck!

I try to make an image appear or disappear as it is clicked. Just simply to toggle the img on and off.
I tried the Image Button component but that only changes the image if the click is held down (or rolled over). I'm trying to do basic img toggle (like a light switch).

As background if this helps the overview....There will be around 30 of the same image on the page which need to act independently in this toggling (display :block, display :none)? way.

Any pointers from anyone would be really welcomed.
Thanks!

[San Khong]

It's fairly easy to do that using Events.

Select the image, right click and select Add event...

Event - choose Mouse > click

Action - choose CSS > Set styles

Receiver - choose the id of the image

Configuration - Add property to change

Then you can pick display none or visibility hidden or whatever CSS property you like to use.

You can edit the events after they are set by clicking on them in the Events panel on the right side.

Hope it helps.

San

GWD Team

[ptr...@googlemail.com]

Thanks San,

Yes - I had got that far. I can event manage the image to do (e.g.)opacity 0 with a click. Thats all good.

Where I am stuck is how to get (e.g.) opacity back to 1 with a subsequent click of the same image.

So, my goal is
First click - img opacity 0
Second click - img opacity 1

Thanks for guidance!

[San Khong]

You can use custom events for this.

Detect the image opacity and set it accordingly.

if (document.getElementById('gwd-image_1').style.opacity == 0) {

  gwd.actions.events.setInlineStyle('gwd-image_1', 'opacity: 1; ');

} else {

  gwd.actions.events.setInlineStyle('gwd-image_1', 'opacity: 0; ');

}

where 'gwd-image_1' is the id of your image.

I notice that style.opacity will not return 1 even if opacity is 1 at the start.  To workaround that problem, add another event to set the opacity to 1 when the page is ready to present.

In the events panel, click + button.

Target - select page1 or the id of the page

Event - Page > Ready to present the page

Action - CSS > Set styles 

Receiver - select the image id

Configuration - Add property to change and select opacity 1.

I attached the file.

 

San

GWD Team

[ptr...@googlemail.com]

San,
Wonderful! Thank you! Its perfect.
Great support!