[Tutorial] Tabs Pagination Workaround

Community resources Webflow Tips
1

Hello Community,

Just sharing a workaround for adding pagination between tabs. Not sure if there’s a way to implement that natively neither if it’s been solved somewhere else in the forum. First time writing here! :hatching_chick::blush:

Live Example: https://tabs-pagination-workaround.webflow.io/
Preview Link: https://preview.webflow.com/preview/tabs-pagination-workaround?utm_medium=preview_link&utm_source=dashboard&utm_content=tabs-pagination-workaround&preview=ea634d4758b6f5a12e99d75e4b230ec3&mode=preview

This workaround is fairly simple to implement.

Short Rationale

  1. Give each Tab Link (under Tabs Menu) a unique ID (in this example I’ve used ‘Jellyfish’, ‘Desert’ and ‘Smoke’ - you can name it as you like)

  2. Create two buttons (your Pagination Buttons) inside each Tab Pane (under Tabs Content)

  3. Give each Pagination Button a unique ID (in this example I’ve used ‘PreviousTab1’ and ‘NextTab1’ for the buttons inside Tab #1)

  4. Got to your page settings

  5. In Custom Code, add the code before the body tag

Here’s the code snippet used in this example.

<script>
	
  // Pagination buttons inside Tab 1
  
	$('#PreviousTab1').click(function(){
    $("#Smoke").click();
});

	$('#NextTab1').click(function(){
    $("#Desert").click();
});

	 // Pagination buttons inside Tab 2
  
	$('#PreviousTab2').click(function(){
    $("#Jellyfish").click();
});

	$('#NextTab2').click(function(){
    $("#Smoke").click();
});

 // Pagination buttons inside Tab 3
  
	$('#PreviousTab3').click(function(){
    $("#Desert").click();
});

	$('#NextTab3').click(function(){
    $("#Jellyfish").click();
});
	
</script>

Hope that’s useful. Let me know if you need any assistance. Glad to give back to this amazing community from which I’ve learned sooooo much. Many thanks to everyone here!

Cheers,
Moa