Pagination Not Working With Tabs

[Helix_Media]

Hello, I really need help getting this resolved asap.

After I publish and test my site after trying to get this page working. I click on a menu tab and for the menus with a lot of cms items they have a pagination with next and previous. Whenever I click on them they switch to a different tab or it gets stuck and won’t let me click previous. I cannot figure what in the world is going on here.

Live Page:Whiskey

Read Only: Webflow - Rock and Rye

Update: So I tried this code here which seems to fix the issues but added a few more issues.

1. I cant seem to define a default tab when page loads
2. Some of the tabs start off in 2nd or 3rd pagination instead of at the beginning.
3. All of my interactions for the tabs don’t work consistently on mobile.

Sorry, I cannot seem to post the code but its in the body of the whiskey page.

[MXI (Maxi - Webflow Designer)]

Hi @Helix_Media ,
i assume the first problems are already resolved.

@Helix_Media

• I cant seem to define a default tab when page loads

Normally, the current open tab in the designer is the default tab in the published project.
Here is a blog post:

[SOLUTION] Setting Default Active Tab

Webflow seemed to start prefixing with the w- the classes for tab links and tab panes , causing the selectors for the original script to break. Just update your snippets so it matches the following: <!-- START FIX: Always show the first tab first --> <script> $(".tab-link").removeClass("w--current"); $(".tab-pane").removeClass("w--tab-active"); $(".tab-link:nth-child(1)").addClass("w--current"); $(".tab-pane:nth-child(1)").addClass("w--tab-active"); </script> <!-- END FIX: Always show …

@Helix_Media

Some of the tabs start off in 2nd or 3rd pagination instead of at the beginning.

Are you sure, you styled the previous button?

@Helix_Media

All of my interactions for the tabs don’t work consistently on mobile.

For simplicity, you should give your tabs all the same class.

After this you can use one interaction for the animationy by setting the trigg
er to a class. (the defined class of all your navlinks) →

All in all, i wouldnt create this layout with tabs. You should consider using finSweet CMS libary to filter and sort your items live. https://cmsdocs.webflow.io

There are a lot great yt tutorials how to set it up. Just search finsweet cms libary real time filtering. (you can also load more cms items WITHOUT refreshing the site.)
I am already using the libary for real time page search. It is great. → completely free

Maxi

[Helix_Media]

Thank you Maxi!
Yeah it seems like the majority of the issues are resolved, I am a bit confused on the interactions though. I am not sure how to formulate the interaction to act independently when each tab is clicked. Also I am defiantly going to check out finSweet, do you think i would be able to make this exact layout with finSweet with no coding? Also the default tab with the published project doesnt seem to work in this case since putting in the code i pulled online to fix the pagination issue. Is that just something that wont work anymore? Thanks!

[MXI (Maxi - Webflow Designer)]

@Helix_Media

I am a bit confused on the interactions though.

Forget it. I am not 100% sure if that will work with the tabs element.

@Helix_Media

do you think i would be able to make this exact layout with finSweet with no coding?

You will need to edit little trigger code snippets. But they have great videos and they show you everything you need to know. And yes i think you will be able to recreate this with finsweet libary 100%. It is not very complicated. The best is you dont have to create 100 tabs. You just need 1 collection with the drinks and some buttons. Then you have to get your buttons the right attributes and add them into the code. I would test it on a different site…
If you have the layout and dont get further, you can dm me and i will see what i can do.

Maxi

[Helix_Media]

Sorry for the late response. You have such help, thank you!!