Button inside a tab Link to the next tab

Design help Custom code
1

Hi,

I’m trying to test the following script for a form/survey
but i can’t get it working properly

https://webflow.com/design/form-firebase

I followed this topic, but can’t get it working :

thanks for your help
david

2

Add live url (& Read only link)

Base on this example
https://discourse.webflow.com/t/linking-to-specific-tab-from-another-link-or-button/3665/2

Step1:
Put button inside tab-1 and add some class:
image

Step2
Also add class for the target tab
image

Step3
Add custom code (Before body = after jquery loaded)

image
image716×353 22.6 KB

Thats it. If something goes wrong i Guessing your selectors are wrong.

Not working - 1 - button issue?

Check if click event working (console.log())
image

<script>
  $('.button-link-to-specific-tab').on('click', function (evt) {
     console.log("Button Test");
    $('.target-tab-link').triggerHandler('click');
    evt.preventDefault();
  });
</script>

image
image1223×1081 36.4 KB

Not working - 2 - tab issue?

Check if you select the target tab. Again inspect the live url site - go to console and copy-paste this line of code (Type under the console)
$('.target-tab-link').css("background-color", "red");

image
image1175×568 17.6 KB

Click enter (If the tab is red your selector works fine - Not red - check again names and so on)
image
image1176×563 17.4 KB

2 Likes
3

Many thanks for your help Siton

My mistake when i placed tab name on contener and not tab
not works

thanks
david

4

Hey @Siton_Systems,

This is awesome, thanks for sharing, I got this to work on my site too :slight_smile:

In my situation I have a group of 3 tabs, nested within the first tab is a group of 9 tabs, in the second tab has another 6 nested tabs and in the third tab has 5 nested tabs (Imagine a 20 step tutorial, broken down into 3 chapters)

I would love a way to use JS to progress from one tab to the next to the next without having to create separate classes for each of them… any ideas?

Cheers,
Will

5

Write me in private. In general their is option to select next node by code (n+1).

Anyway, it’s hard to answer without specific example.

6

Hi Ezra

I landed on this thread searching for a way to change tabs while simultaneously
submitting a form in one click of a button. A (submit) button with two functions, essentially.

Using your solution achieved changing tabs but not submitting the form. I then realised messing around with the code that "evt.preventDefault(); prevents it from submitting, but left out it prevents changing tabs. My skills with code is limited to c/p.

Do you have a solution that would enable me to populate a form in tab 1, click the submit button “Next”, submitting the form and changing to tab 2?

Best regards

7

On the form tab - add event “related” to form submit:

<script>
document.getElementById("myForm").addEventListener("submit", goToNextTab);

function goToNextTab() {
  console.log("do something here");
  $('.target-tab-link').triggerHandler('click'); /* click on tab menu item X => go to tab X*/
}
</script>
8

Hey all :wave: I found another solution in the forums here and consolidated the code into a quick tutorial. You don’t have to make any edits to the code and it’s super flexible.