Defaulting to a Certain Tab

Is there a way to have the screen default to a certain tab each time the section containing the tab appears?

I’ve gone into the Tabs Settings and selected “Tab 1” (see below), but that doesn’t lock it to that screen.

https://preview.webflow.com/preview/bokonlinebanking?preview=07aa63151e286e67e3fc6db196ca788b

Have you tried to switch tab, publish and then switch back to your desired default tab and publish again?

Yes and it always defaults to the last tab that was viewed.

maybe its a cache thing? maybe clear your cache or open the page in other browser and clear its cache.

Are you wanting the tabs to go back to the default tab when you scroll away from the section so that when the user scrolls back into the section the tabs have reset?

DavidN … You are right on the money. I don’t want people to see the third tab first; would be a disconnect. Any ideas.

Maybe the almighty JavaScript king @bartekkustra can provide some magic?

I :heart: you guys :D

Add a unique-id for the default (first tab) and name it default-tab as on the screen below.

function lt_isInView(sectionname) {
	var howFarFromTopWeAre = $(window).scrollTop();
	var andWhatsTheBottom = howFarFromTopWeAre + $(window).height();

	var sectionPosition = $(sectionname).offset().top;
	var sectionBottomPos = sectionPosition + $(sectionname).height();

	return ((sectionBottomPos <= andWhatsTheBottom) && (sectionPosition >= howFarFromTopWeAre));
}

$(document).ready(function() {
	if(lt_isInView('#New-Look')) {
		$('#default-tab').trigger('tap');
		console.log('switching to default tab');
	}
	$(window).scroll(function() {
		if(lt_isInView('#New-Look')) {
			$('#default-tab').trigger('tap');
			console.log('switching to default tab');
		}
	});
});

I have absolutely no idea if that will work as I didn’t test that. If not, please contact me over Skype and we’ll find the issue and post the solution here later.

Best,
Bartosz ;)

2 Likes

OK. Where do I put the code? Sorry for the ignorance in advance.

Go to your Dashboard and under Custom Code you place it in the Foot code window.
Be sure to wrap the code in <script></script> tags.

I think it worked, but I have multiple sections with tabs and it won’t let me use default-tab on the other sections since it was already used. Thoughts?

Uhm…I’m a total noob when it come to Javascript…but what if you duplicate the entire code you just put into Custom Code, change the ID’s of #New-Look and #default-tab to the corresponding ID’s of the other tab you want to affect?

Take a look at this portion of the code and change the ID’s I talked about above:

$(document).ready(function() {
	if(lt_isInView('#New-Look')) {
		$('#default-tab').trigger('tap');
		console.log('switching to default tab');
	}
	$(window).scroll(function() {
		if(lt_isInView('#New-Look')) {
			$('#default-tab').trigger('tap');
			console.log('switching to default tab');

What does #New-Look correspond to?

After looking in the designer from your preview-link, the ID of #New-Look is on your “Program Section”-class.

1 Like

Sorry. I’m so lost. On my “Program Section” class?

Yes, the section holding your Tab has a class of “Program Section” and also an ID of “New-Look”.

1 Like

OK. I see what you’re saying. Thanks for the patience.

No worries. Just ask if you run into troubles and I’ll try to help you :smile:

1 Like

Thanks StevenP and bartekkustra. I think you guys solved the issue.

3 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.