Link button toggles

Hey all,

I have what I assume will be a pretty basic problem to solve - couldn’t find an answer in the forums already!

Basically we have a few projects where we would like multiple buttons (toggles) to toggle on and off, however when they toggle on, all other ‘on’ buttons should toggle off. Sometimes these toggles will animate slightly as well.

I have come up with a slightly hacky solution, which triggers a custom behaviour to close all buttons when the animation of a toggle has finished. A pause timeline keyframe stops that specific toggle from closing. The problem here is that the ‘close’ animation only plays when the ‘open’ animation has finished, and multiple clicks before the ‘open’ animation has finished on other buttons messes things up slightly.

I want to avoid a solution which makes custom close commands for each specific button as that is not scaleable.

I’ve attached the file below, look forward to hearing your guys thoughts!

multiple_menu.hype.zip (11.0 KB)

multiple_menu.hype.zip (11.4 KB)
Do you mean something like this? I use a relative timeline for each button. You can change size, color, alpha etc. of each Button in these timelines.

Cheers, Kalle

3 Likes

@marv9n

Hi Marvin!

As You did not rule out using JavaScript as a solution I've put together a very basic "button toggle" script - no timelines or symbols are used. multiple_menu_JHSv1.hype.zip (15.6 KB)


Overview:
Using JavaScript makes it easy to add new buttons that You want to behave like the other buttons. Simply duplicate an existing button and drag it into position. It is also easy to change the values (position, opacity, etc.) for all the buttons at once; and these settings are in one convenient spot.

You can have each button do unique operations - but that capability is not shown here; however see the lines:

// This is the place to add code to have the selected/previous button do something

in the function "btnToggle" (shown below) that indicate where this code could go.



Notes:
The buttons are placed in a group ("Btn Group") to give them a common reference point.

No classes or IDs have been assigned to these buttons - something that will probably be needed when You want a clicked button to do something in particular.

In the "Head HTML" we initialize a variable ("lastSelectBtn") giving it a value of "0". This value is used in the code that follows to check if any button has been clicked. If another button has been clicked the value of "lastSelectBtn" will not be zero ("!= 0").

The function "btnToggle"** is triggered when You click on one of the buttons. "element" in the code below is the button that was just clicked on to trigger the script.

function btnToggle(hypeDocument, element, event) {
    if(lastSelectBtn != 0) {
    // i.e. a button has been previously clicked
    // move the previously selected button back to its "left" origin point of "0"; set opacity to 100% (i.e. "1.0")
	hypeDocument.setElementProperty(lastSelectBtn, 'left', 0, 1.0, 'easeinout');
	hypeDocument.setElementProperty(lastSelectBtn, 'opacity', 1.0, 1.0, 'easeinout');
    // This is the place to add code to have the previous button do something
	}

	// move the selected button to its new "left" location of 237px; set opacity to 50% (i.e. ".5")
	hypeDocument.setElementProperty(element, 'left', 237, 1.0, 'easeinout');
	hypeDocument.setElementProperty(element, 'opacity', .5, 1.0, 'easeinout')
	lastSelectBtn = element; //"lastSelectBtn" value is now the selected button 
    // This is the place to add code to have the selected button do something
}
2 Likes

Hi Kalle!

I discovered a small fly in the ointment with your project… if You click on a button that has already moved to the right side; then click on another button on the left side, the left side button moves right, but the previously clicked button on the right side does not move back to the left position.

Hei Jim. You´re right. Just removed the “can restart Timeline” checkmark. Now it works correctly, I think.multiple_menu.hype.zip (19.4 KB)

2 Likes

Working well on my end! :+1:

Hey guys, thanks for the quick responses!

@ktewes Whilst your solution works it’s one I’ve tried to avoid due to the ‘scaleability’. Imagine if you had 20 buttons, it would literally mean you have to have 20x actions on each buttons as well as 20x timelines. Thanks for your suggestion though - appreciated!

@JimScott This is perfect, I assumed a JS solution would be the way forward. Thanks a lot! I will try to mod this with timeline actions so that I can get a bit more funky with the animations.

Thanks all!

1 Like