Anchor links to fusion tabs on same page

[FrRausch]

#513261

Dear Avada community,

I´ve got a problem with anchor links to fusion tabs on the same page. Is it possible to set links like that and if so, how?

Thanks for help!

Best regards
Franzi

[kimmer99]

#532443

I have the same question.

[Michael]

#532459

Hi @frrausch & @kimmer99

Linking to and opening tabs from an anchor point is not an option right now. We do, however, have this as an item for our development team to build in as a feature sometime in the future.

Thank you kindly

[kimmer99]

#532465

Okay – this is what I was able to do. I set up the tabs on my page. Then using inspect element in the browser, I found in the html code a ul with a class=”nav-tabs”. Within that there was one li for each tab on the page. Under that li, there was the anchor, with an href for the tab that was relative of the format #tab-xxxxxx where xxxx is a series of letters and numbers. I right-clicked on that and copied the link address (b/c I needed the absolute link since I was on another page, as opposed to the relative link), and I used those links to the specific tabs.

Now when I click on one of those links, I go to the page with the tabs, and the linked tab section is open and I’ve scrolled there.

I hope that makes sense.

[lisaaatj3]

#564999

Is it already possible to link to a tab on the same page by using an anchor link?

[hotslicedesign]

#585941

Thank you! This worked great! Just add the page title before the tab number (if there is one). IE: /page-title/#tab-number

[rdecaluwe]

#649201

I asked this question before in this thread (https://theme-fusion.com/support/account/?conversation_id=612676393).

AND I found the same “solution” as above described. However: when you change the tab order or add a tab, all the #tab-xxxxxx get’s changed, yes, the tabs get a new -xxxxxx and all your anchor-links don’t work anymore.
So the dev-team is really invited to make work of the possibility for giving tabs an anchor name, as is possible in other page-builders, and really is not rocket science IMHO.

Cheers!

[dgalilea]

#732104

Hi!

Good afternoon after a long time!
Is there any new about this development? Is it implemented?

I am very interesting to open the tabs using anchor links.

Thanks!

[ARSGeek]

#732661

Hi. I had the same question earlier today. My scenario was multiple tabs on a single page. I wanted to create a link on “Tab 3” to go to “Tab 1”. This is how I solved it….

I created the Tabs using Avada Tabs Elements. On Tab 3, I selected & cut the phrase I wanted to be a link. I then selected the “One Page Text Link” element. In the Name of Anchor box, I added the Tab-1 link (#tab-1-xxxxxxxx), then in the second box is the actual text I wanted to be visible & a link.

I then went to Tab 1. There at the top of the text box, I inserted a regular Menu Anchor element. In here I added the “tab-1-xxxxxxxx” text I had previously inserted in the One Page Text Link element.

I saved the page then viewed it. Upon navigating to Tab 3 then clicking the link, it automatically moved me back to Tab 1. SUCCESS!

I did as mentioned above and inspected the page to get the Tab 1 link. I’m guessing this solution would work fine switching to a tab on another separate page as well. You would just need to use the full url instead of just the Tab anchor.

Let me know if this works for anyone else.

[dgalilea]

#732681

Wow, great!

It works also for me. Waiting for the replies I have been trying different solutions. I found some of then that worked. I could change the content fo the tabs but not changing the Tab to Tab:active, so , the text changed but not the tabs. But this works perfect!

Now I have found another issue. When it changes to the other tab, it automatically makes a scroll to the anchor point (at the top of the container). I have a header in the site which height is 115px, so the Tabs stays behind the header because the scroll sets the anchor point in the top 0px of the web.

Do you know what I mean?

Is there any option to give additional px when a scroll to an anchor point is made? It is happening with the rest of the anchor points of the website as well.

Thanks a lot ARSGeek!

[ARSGeek]

#732689

Try adding a class to that anchor point. Such as “top-anchor”, then adding the appropriate CSS.

.top-anchor {
padding-top: 150px;
}

May have to add !important after the 150px.

Let me know if this works for you.

[dgalilea]

#732746

Thanks for your help!

No, that is not working. When using padding-top, a 250px blank space appears between the tabs and the beginning of the content (everything inside the content).

I tried this one too but do not work neither. I think this last one does not work because the anchor point cannot go “outside the container” so, its limit is the top of the content. I do not know if it makes sense. (Being anchor the class of the anchor point).

.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

I tried change the top value to positive px, but neither. I cannot set the anchor point further the tabs.

[dicky777]

#733204

There is another topic somewhere about that. Try adding an underscore (_) between the # and tab:

#_tab-1-xxxxxxxx

I don’t know if it works here

[dicky777]

#733206

And i look forward to a solution for a link from within the same page… Have found this /?dummy=$random#_tab-xxxxxxx but that reloads the whole page!

[dgalilea]

#733474

Thanks dicky777 for the answer. Using your tip, it works the padding for the anchor point but clicking the link does not change the tab :S

[Author]

Posts