Multiple toggle buttons on Website

Hello , there . I’m having trouble with navigation bar that i want to make . At my project , I made a simple one with colors , orange , green , blue and red .
I want to make it in 3 conditions :
1.I want that when I click the orange bar , the red rectangle will come out , and then when I click it again it go back . I have made it so far ,
2.I want that when I click the orange bar one time (the red bar come out) ,and then click the green bar , when the blue bar come out the red bar sliding back inside .(cannot do that ) restarting to its first position

Can someone help me out ? I’m on my deadline to build this stuff , thankyou !
References website : http://umd.edu
here is the file bar.hype.zip (12.1 KB)

Try a search on this site for " toggle button "

I already looked up to the toggle button , and already made it into this state .bar.hype.zip (12.4 KB)

but , what i want is , I hope when I click the orange bar one times and then click the green bar , the orange bar going to reset into its first state and viceversa . should i made it with java script?

Hi Ricky!

Here is a JavaScript solution - it is annotated fairly well in the script so I won’t go into it in this post.
bar_JHSv1.hype.zip (14.8 KB)

Demo here.

Notes:
• “Head HTML” - a global variable is initialized.
• “sliderMenus” function - does the work for both “menu” buttons.

2 Likes

thankyou for your help Jim . It works nicely , but until I click the same button consecutively 5 times , it stops working , how can I fix that?

Hi Ricky!

I ca not replicate the “5-click limit” issue. I have clicked on both the green & orange buttons for 10-click cycles (open>close) and not had a problem - don’t know what to say except look at your “Developer” menu to see what happens after click 5 - is there an error or any sort of reporting?

Also what browser are You using (and version number)? I have given Safari (10.1.1), Chrome (61.0.3163.100 (Official Build) (64-bit) ) & Firefox (56.0.2 (64-bit) ) the 10-click trial with no issues - including another testing of randomizing the button selection during clicking - again no issues.

I made a no-need-js version, hope to help you out~toggleButton.hype.zip (14.2 KB)

@uedvincent

Note the "the blue bar come out the red bar sliding back inside".
The OP's request was to have sliders move back into place, not just disappear as per your version.


e.g. Using your color scheme:


Yellow button triggers the "red slider"
Cyan button triggers the "blue slider"

If the "red slider" is extended (Yellow button was clicked), when clicking on the Cyan button the "red slider" disappears, it does not slide back in place - after which the "blue slider" slides out into position.

Vice versa for clicking the Yellow button when the (Cyan button's) "blue slider" is extended. The "blue slider" does not slide back into place it just disappears and then the "red slider" slides out.

I tried doing a "timeline only" version and I could not get it to consistently run clean with the sliders always sliding in and out properly.

Oops, I made some mistakes, and I tried another way of thinking, and it should be able to solve the problem better.
toggleButton_V2.hype.zip (14.8 KB)

1 Like

it works , thanks to you . i tried to change the time to 0.5 , so it doesn’t get slower when it goes back . Cause when you put 1 second on it , it feels it was stuck .

Thankyou

1 Like

hello , thankyou for your help , what is the hotpot things . can you explain it to me?

Please ignore the name. I use the two layer to make a button. The upper layer trigger the 「show」timeline, The hidden command is triggered by using the second layer…
Sorry, English is my secondary language, may not accurately answer to you.

okayy , thankyou , I got it now

@uedvincent

Nice effort on the "Timeline only" solution - it works well!

1 Like