Streaming live at 10am (PST)

Triple toggle switch

Hi there,

I want to create a triple toggle button for a website. The 3 toggle positions have to trigger 3 individual id’s (to make some javascript work) and should look like in the pictures. Does any of you have an idea of how I could create it in webflow?

Here is the website: integralmap.one

Kind regards,
Dominik

Bildschirmfoto 2020-09-13 um 14.30.43 Bildschirmfoto 2020-09-13 um 14.36.07 Bildschirmfoto 2020-09-13 um 14.37.22

Welcome to the forum!

Not sure if this would work for your application, but 3 buttons all together should do the trick.

Put three buttons in one div all next to each other. Set the parent div to inline-block, or use a flexbox.

Each button will have a unique style, first, second and third.

First should have a left, top, bottom border, and no right.
Second should have a top and bottom border no right and left.
Third should have a right, top, bottom border with no left.
All should have full rounded corners 100px

The active state of each has an inverted background text. This will create the inside toggle illusion.

Might need to play with margin and padding to get the exact look your wanting.

Hope that helps. :grinning:

Hi Drew!
Thank you for the kind welcome and your explanation.
Would it be possible that only one of the three options is active at a time? I want the the white circle (the indicator which option has been selected) to slide from left to right.

Kind regards

Dominik :grinning: