How to add "toggle" in my button?

Ask the community
,
1

I want to add toggle to my button to show and hide a box in the same button.

2

Hi Geovel,
Check out this examples:

Good luck

Roi

3

Hi Roi,
Thank you for the example, but I want the function in the same button, like a toggle. It can be done by If else statement?

4

Hi Roi.

I hope this can help you to figure out what I want to achieve.

I want the same button to show and hide a box.

5

Hi Geovel,

Roi beat me to the answer, but I can maybe help you with the button…

You just need to create your own button. Use a container box as your button. Then add (attach) another container box to the first one. It will look something like this:


The circle inside the box is just another container box, but you could put pretty much anything else that you want.

Then, add an oClick() function:

export function box1_click(event, $w) {
	//Toggle the circle on/off
	if($w("#box1").children[0].hidden) {
		$w("#box1").children[0].show();
 	}
	else {
		$w("#box1").children[0].hide();		
	}
	
	// Do all sorts of interesting things here...
}

The onClick() function till toggle the circle inside the box on and off, and you can also add other code that performs whatever other actions you need.

I hope this helps.

Yisrael

6

Hi again,

I just wanted to point out that you could in fact use a Button as your main element, and then customize it as you want. For example:


For the above button, I took a basic button, deleted the text, added a text field that says BUTTON in a stylized font, and then added the special shape on the right side. All of the added elements are available to you by using $w(" #box1 ").children (e.g. in the onClick function). To learn more, refer to the articles that Roi mentioned in previous posts.

Yisrael

7

Cool! How would you say change the color property of a vector image or BG for example? I’m trying to create a bingo style challenge board for my customers, so it makes it easy for them to update on the fly.
Thx!

8

@tbelgrave You can accomplish this by positioning one image or button on top of another. Then show() or hide() the appropriate images/buttons.

9

Hi Everyone,

Not sure if anyone else is having the same technical issue but can’t create my own post for some reason so seeing the expertise here think its the right place…!

Would be really grateful of some help with this.

Currently I have a vector image set to unmute a background video on the page below bottom right with the label #Sound

It is successfully unmuting an autoplay video in the background for both desktop (videoBox2) and tablet / mobile (videoBox1).

The code is below:

export function Sound_click( event ) { $w( “#videoBox2” ).unmute(); $w( “#videoBox1” ).unmute();

}

What I would ideally like to do is make this a toggle on / off - mute / unmute button but I can’t seem to find the code for this?

I don’t want to have two separate buttons for this, which could be achieved using the reverse of the code above and ideally another image would swap in to indicate the off state when its initiated.

Any pointers?

Many thanks!

10

Today everyone wants to get more and more emotions out of life. I would like to appeal to all those who are interested in Chernobyl and advise you to pay attention to tours to chernobyl . Your decision would be to turn to . It’s an incredible experience.