I have created 2 Tabs and added button to navigate to the next tab and come back to previous tab. Came across a similar post with Prev/Next button in Tab, but that didn’t work.
Have created IDs for each tab, but it is not going there on button click.
https://its0xrays-supercool-site.webflow.io/
Hey Oxray, what’s your readonly designer link,
and what tutorial / approach are you trying to implement?
hey memetician,
I am not able to understand what readonly designer link is.
I was following this tutorial. How to Add Prev/Next Buttons to Tab Component
This is the code I tried
It was in the instructions at the bottom of your post.
Sorry about missing this.
This is the read only link:-
https://preview.webflow.com/preview/its0xrays-supercool-site?utm_medium=preview_link&utm_source=designer&utm_content=its0xrays-supercool-site&preview=9d69f667281873d30b2b53860dd5c250&workflow=preview
I tried this youtube video as well: What in Webflow 008 - Opening a Tab with a Link in Webflow - YouTube
I think you’re trying to mix two different approaches.
One is a link to a URL with a querystring, that then gets parsed and triggers a tab selection.
And the other is Samliew’s, which does not reload the page on navigation.
It’s likely much better for your purposes.
http://webflow-tricks.webflow.io/how-to-add-prev-next-buttons-to-tab-component
Personally, I’d clean out the links and such you’ve added, and implement Samliew’s, it’s very straightforward with step by step instructions.
Thank you, I will retry with Samliew’s approach.
I tried with Samliew’s approach and it has worked for me.
But there is another challenge.
The Tabs are not sticky. And the and the content in the tab pane also load at the bottom when I click on next. The contents doesn’t start from the top and instead stays at the bottom. So I have to scroll up and then read.
For example when I click next on the 4th tab, the header of contents of 5th tab doesn’t show. Instead it stays on the next button and I have to scroll up.
Read only link: Here
I’m actually not certain why you’re using tabs for this, there are a few major downsides. Navigation is one of them, another is sticky element placement. Also all of your SEO is on one page, your and link-sharing becomes more difficult.
Is there a reason you’re not just using a regular nav element and a series of pages for your content? Or a collection-based approach?
Regarding button navigation for your tabs, adding scrolling position changes, etc - yes that can be accomplished with custom code but that seems like the wrong direction for your goals.
If this is the right approach for your site though, I can help you code it, just direct message me and I’ll send you my rates.
Ideally, your next and prev buttons need to be “inside” each tab so that they are flush with the content, since the amount varies for each tab. With the right coding it’s not difficult to change tabs and also scroll to the top of the new content area.
Sticky is another distinct issue for a tabs element, and of course you’ll have to rethink that for mobile.