Button linking to a specific Tab

Hi there :slight_smile:

Let’s assume the following:

  1. I have a landing page with three simple buttons
  2. I have another page called “services” with a three tabs (for each buttons).

My question:

Is it possible, that if I click on the second button (on the landing page) the second “service” page opens up with the second tab open instead of the 1st tab (by default) ? Do I need to code a little something ? If so, would an angel be so kind to give me a tip ? :slight_smile:

Read only link of my project:
https://preview.webflow.com/preview/mindsquare?preview=5c7a96e97efdedc08424c4dc55316a97

Please have a look at the following screenshots:


Thank you so much for your time !
Anthony

Hi @anthonysalamin - this is possible yes! I did it on this site:

https://webflow.com/website/Webfonic-Showcase

If you click on the links in the ‘Showcase’ drop down in the nav, you can see it in action. I need to refresh myself on how I did it though… I’ll check it out and get back to you! If i remember rightly, you need to add a bit of code to custom code head section and name your tab links appropriately… Regards Kai

3 Likes

NOTE! However, this method doesn’t take you directly to the correct tab… it opens the page and then moves to the correct tab… like magic! is this ok for your requirements?

UPDATE! I followed this post (start from the 6th post down):

Hope this helps! Good luck! Regards Kai

(You can also open my site above in the designer to see the set up)

2 Likes

Hi Keejo !

That is a beautiful website you got here !
Thank you so much, that is precisely what I’m looking for !
I will check your post below to see if I can get the code working :slight_smile:

Thank you so much for your time !!
Anthony

1 Like

Hi Keejo !

My god it works !! Thank you so much for reffering me to this post !

I’d have one more question though :slight_smile:

When the second page opens up with the correct tab displaying, the content of that tab blinks just once for no apprarent reason. Would it be possible to avoid that “blinking” to have the best possible “smooth user experience” ?

You can have a look at what I mean following the link below and clicking on “Adaptive governance” button.

http://mindsquare.webflow.io

Read-only:
https://preview.webflow.com/preview/mindsquare?preview=5c7a96e97efdedc08424c4dc55316a97

Let me know if you have an idea, otherwise thank you so much already for your patience ! It helped me alot !!

1 Like

Hi @anthonysalamin! Thanks very much! :slight_smile: That is actually my old site now! Your portfolio is great - some very nice work on there! I really like this Mindsquare logo and the presentation of it on your site… very cool… this:

I love how you did this… Regards Kai :webflow_heart:

Great news! I cannot confess to understand how it works but very pleased it does!! I have the same blinking on my site… It would be great to smooth this out but, from a code perspective, I don’t know how to fix this… maybe someone else on the forum will know?

One workaround might be to add a ‘Page Load’ interaction that delays the opening of the tabs until after the blicking. You would set the initial state of the tab widget as Display None and Opacity 0% and then when the page opens, time it so the the tab widget fades in after the blinking… SMOOTH!! :slight_smile:

Hi @anthonysalamin - Its actually the tab CONTENTS that blinks not the whole tabs element… try adding the Page Load interaction to the Tabs Content element, rather than the whole Tab element… this way, the tab headers will display immediately and the tab contents will fade in nicely (after the blink!)… hope this works!! Regards Kai

1 Like

Awesome !!

It works ! I used your Page Load interraction to override the blinking effect :smiley: Wokes like a charm !
Thank you so much for the tip !!

1 Like

Thank you !

This Mindsquare project is one of my “biggest” project sofar since I’ve started to fully freelance on my a few months ago. I have a classic print design education background but got hooked on the screendesign world… I had to hire a “programmer” a month ago to code my Mindsquare screendesign but he really did not deliver what I was expecting… I was so disapointed I decided I had to learn how to do it myself… that’s when I discovered webflow and its amazing community :slight_smile:

You can have a look at what the guy did here: https://www.mindsqua.re/
And what I did here with your help: http://mindsquare.webflow.io/

Have a good day !!

Hey there! Brilliant! …there is always a neat workaround with Webflow! I can confirm, there is no blinking my machine! :slight_smile: Looks great!

My pleasure! Credit where credit is due! :slight_smile: Well, you’ve done a great job… the subtle interactions on your version make all the difference. You certainly ‘did good’ by discovering Webflow, it really is amazing… and your background will certainly aid you well! Good luck with your project and your freelancing! Best! Kai :slight_smile:

Hi @anthonysalamin - just one thing… is this project designed for a European audience? If so, you should change all the words with a z to an ‘s’…

e.g:
organizations (organisations)
organized (organised)
decentralized (decentralised)

:slight_smile:

Hi Keejo,

Thank you very much for the insight !
Not sure exactely what the target audience is, most certainly european at
first yes, as the client is from Germany.
I’m not the copywriter of the project but I’ll let him know !!

Thanks again ! :smiley:

Anthony Salamin

Digital Designer
Photographer

hello@anthonysalamin.ch
www.anthonysalamin.ch

+41 77 421 44 92
+49 175 11 38 245

Gneisenaustraße 89
10961 Berlin, Germany
USt-IdNr.: DE291848819

https://www.anthonysalamin.ch/

HELP!! I am trying to use a slider module when the page is viewed on screen-sized from tablet down and have a link block open a tab. You can click here to view my share page. I have been at my wit’s end trying to figure it out… if anyone has suggestions please help.

Mannie