Button Link to tab on same page

Design help Custom code
1

Allo,
Need some help with linking Continue / Review buttons to respective tabs however, when I tried this trick it hasn’t yet yeild any results.

Can anyone break down the process of how i can make this into the actual magic that it should be.
First Continue button should link to next tab
Second, third and so fourth should do the same
Review should also link back to the previous tab(s).

Oh btw, this is the page that I’m trying to have it work on…
TOP SECRET

Thanks alot!

2

I don’t have an answer for you. I would like to know how to link to a specific tab in a page as well. But I got a question for you.

How are you collecting all of that information in the forms? Custom forms? They’re beautiful! I haven’t had much luck with forms on webflow. I ended up using mailchimp and I still can’t define a field to a specific name in mailchimp and have it sync with webflow. I just embed the form directly from mailchimp and it’s not the best looking.

3

The client will be handling that aspect and we’re yet to get into it.

But my workaround for long forms on webflow (I don’t use MailChimp for this as it’s a bit complex and MailChimp only seem to collect limited fields, name + email + message) … I name my inputs with the same as the label only I put it in all CAPS so that when the form hits my inbox I can visually define the various fields.

I hope that helps.

4

Hey @andreswaby and @Alborz_Heydaryan
Hope this is what you are looking for. Wrap the code below in script tags in your body custom code section. Swap out the #tab-continue and #tab-previous for the ID of your selector buttons and the #Tab1,#Tab2,#Tab3,#Tab4,#Tab5 for the ID of your tabs.
Here is a working example: Custom Tab Buttons Published Example
Here is the site preview: Custom Tab Buttons Webflow Preview


  $('#tab-continue').click(function() {
    if ($('#Tab1').hasClass("w--current")) {
    	$('#Tab2').triggerHandler('click');
    }
    else if ($('#Tab2').hasClass("w--current")) {
    $('#Tab3').triggerHandler('click');
    }
    else if ($('#Tab3').hasClass("w--current")) {
    	$('#Tab4').triggerHandler('click');
    }
    else if ($('#Tab4').hasClass("w--current")) {
    	$('#Tab5').triggerHandler('click');
    } 
	});
  $('#tab-previous').click(function() {
    if ($('#Tab2').hasClass("w--current")) {
    	$('#Tab1').triggerHandler('click');
    }
    else if ($('#Tab3').hasClass("w--current")) {
    	$('#Tab2').triggerHandler('click');
    }
    else if ($('#Tab4').hasClass("w--current")) {
    	$('#Tab3').triggerHandler('click');
    }
    else if ($('#Tab5').hasClass("w--current")) {
    	$('#Tab4').triggerHandler('click');
    }
	});

Cheers,
Ben

2 Likes
5

Ah man,
Thank you so much! Imma test drive it and let you know how it works out.

6

I’m dancing inside my body sitting on my chair. IT WORKS and THIS IS SO AWESOME.

THANKS A MIL BUD!

7

No worries, glad I could help :blush:

1 Like
8

Year 2022! If the code doesn’t work;
change the

.click(function() {

to

.click(()=>{

This should work :slight_smile: