Streaming live at 10am (PST)

Button inside a tab Link to the next tab

Hi,

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

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


thanks for your help
david

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)

Thats it. If something goes wrong i Guessing your selectors are wrong.
https://www.w3schools.com/jquery/jquery_ref_selectors.asp

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>

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");


Click enter (If the tab is red your selector works fine - Not red - check again names and so on)

1 Like

Many thanks for your help Siton

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

thanks
david

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

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.

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