Jump to a tab on another page using a link.

I have inserted tabbed content on a page. I now have something under each tab. I would now like to jump directly to a specific tab from another page with a link. Is that somehow possible?

You can only reach targets on your own page via Target. URL does not work either.

I think (but uncertain) that you can jump to a target on another page using the page URL with the target# after the URL.

I may be wrongā€¦ā€¦

unfortunately not. But thanks for the suggestion.

Which ā€œtabā€ are you using?

I mean the Tab-Bric:

https://help.blocsapp.com/de/knowledge-base/tabbed-content-bric/

For example, I have 4 tabs there with different content. I would now like to jump from another page directly to this tab via a button or link and not just land on the corresponding page, where I would then have to select the tab manually.

There was a way to link to tabbed content on the same page in Blocs 4, but it doesnā€™t work in Blocs 5. See below post for more info.

I donā€™t think anyone has posted a way to link to tabbed content from a different page. Iā€™d be interested in knowing how to link to tabbed content, both from the same or different page, in Blocs 5. Iā€™d like to do so from the nav menu. Iā€™ve Googled for a solution code wise, but have yet to find something that works.

Good luck in finding a solution.

pruthe

2 Likes

There is no standard HTML way to do this, this must be implemented with JavaScript.

As this is the standard bric, such a feature would have to be implemented by @Norm.

The conclusion of my thread which you linked to is in my closing post in that thread, which is basically no solution:

Even to this day, in July 2024, I donā€™t have the functionality I desperately seek (which is really just basic functionality that everybody needs), and I am still unable to update to Bootstrap 5 because the amazing coding work done be @PeteSharp is only compatible with Bootstrap 4.

Iā€™m really quite surprised after all this time no solution has presented itself because one of the most fundamental things we all do on the Internet is linked to things, and yet, we have no means whatsoever to do basic and fundamental linking to tab content in Bootstrap5. Again, super basic stuff here. I just donā€™t know how to code it myself.

But all this makes me wonder how people can create tabbed content and be satisfied with it if they canā€™t link to content inside the tab!

Ditto for Accordian content like my FAQ. I can only link people to my FAQ page and not to individual topics within that FAQ because itā€™s an accordion, and even Peteā€™s unreleased Bric doesnā€™t handle that. So to guide people to the right content I basically have to tell visitors to my site that they need to go to the FAQ page and then click on such and such a header to expand it, and after that scroll down and read paragraph number such a such to locate important content. Itā€™s not a good work-around at all, but itā€™s all I have.

SUMMARY: We desperately need the ability to link/jump to any content with an any Tab or Accordion, even if that content is on another page or the same page.

1 Like

Not sure if this help, but may have something to help

I think I might have found a way to create a hyperlink in Blocs to open a section of tabbed content within the same page. I asked a question on how to do this using ChatGPT by asking the question: ā€œUsing Bootstrap 5, how can I create a hyperlink to transfer control to and activate a tab within tabbed content?ā€

Anyway, I took the answer ChatGPT provided and modified Normā€™s Bootstrap 4 sample Blocs file to open tabs using links. The Bootstrap 5 version of this file is attached. Iā€™m going to try using this technique on some of my single page projects. Sorry, I do not have a solution for jumping to tabbed content on another page.

Tab Links-bs5.bloc (65.1 KB)

Hi @loepi and @JDW,

If youā€™re interested in trying a possible solution, I may have found a way to create a hyperlink to open tabbed content on another page. I modified my original ChatGPT question above to append the text ā€œon another pageā€.

I took the answer ChatGPT provided and modified it slightly to work with Blocs 5 tabbed content. A sample Blocs file is attached and you can try using this technique on your Blocs files. So far, it seems to be working for me.

Good luck!

pruthe

Tab Links Other Page-bs5.bloc (128.0 KB)

4 Likes

@pruthe Sorry that Iā€™m only getting in touch now. Thank you so much for your help. It really works perfectly and helps me to jump to the individual tabs. I canā€™t tell you how much youā€™ve helped me!

1 Like

Hello, @pruthe !
I sincerely apologize for my delayed reply.

First off, amazing work! I just tried your Blocs document in Blocs 5.2.5. To make it easier to see which tab you are in, I colored the text. And to see which tab set you are using, I added a large bottom margin too. Hereā€™s my modified version of your document:

Tab Links Other Page-bs5_JDWmod.bloc.zip (66.7 KB)

QUESTION:
How can I get the linked tab content to display while also showing its tab?

Right now, if I click on ā€œTransfer control to other page and enable section 1 tab 2ā€, it shows me this in the browser:

You can see the problem above. ā€œEver visit Japanā€ is extremely hard to spot because itā€™s slammed against the very top of the page. Had I not colored the text, you probably wouldnā€™t have even seen it at all.

So instead of linking only to the content of the tabs, it would be preferable to have the tabs also be shown, like this:

I am able to display both tabs and the content using the method @PeteSharp created (which again, only works under BS4, not BS5). You can see that in action on my website now by doing this:

  1. Open this URL
  2. Click ā€œ1480 Security Systemā€
  3. Scroll down to Q2, then click on the blue ā€œVehicle Compatibility chartsā€ text link.

Hereā€™s what you will see when you do the above 3 steps:

Take note of how the user is not lost in the content because you can see precisely which tab you are in. Without seeing the tabs, you are lost. Also note that if you scroll to the bottom of that same web page, down to the ā€œIMPORTANT ā€” PLEASE READā€ section in gray, you should click on the ā€œCompatibility PDFsā€ link. That will smooth-scroll up and open the 3rd tab (if not already opened). Note how all the tabs are displayed and a little margin above them too. So when you click that link, you arenā€™t immediately jumped to a place. You are smooth scrolled, so you know you are still on the same page, and you know which tab is opened by the link you just clicked.

All said, if you could tell me how to use your otherwise excellent BS5 linking solution so it shows the tabs (not merely the content of the tab), that would be absolutely fantastic!

Thank you!

Ahh yes, the bric that never came out of testing aye @JDW :laughing:

We took so long the framework changed.

2 Likes

Which is why I am still using BS4, not BS5. Seriously, your creation is so good, Pete, thereā€™s no way in Hades (or Gehenna) that Iā€™m going to update to BS5 without that important functionality.

If you check the PM you sent to me in May 2020 (ā€œRE: Tab Scroller Bricā€) and then scroll down to April 2021, you wrote this:

The href is no longer used in tabs. It uses an attribute data-bs-target.

So the script will need to be modified, as it is looking for the href to set the active tab. Without the tab being active it doesnā€™t know where to scroll too.

So itā€™s been just over 3 years now. But Iā€™m patient. Itā€™s never too late for an update! :hand_with_index_finger_and_thumb_crossed:

1 Like

Honestly it ends up failing off my radar. Let me take a look at the migration. When you update your website to 5, you will be able to use Offcanvas Helper also for your menus. :smiley:

2 Likes

James (@JDW ). I sent you a new version of Tab Scroller to try out in a BS5 project.

2 Likes

Hi @JDW,

I saw your post here about wanting a way to open tabbed content on another page without covering up the actual tabs. I also was interested in having this capability, so submitted another question to chatGPT on how to do this. The answer it returned seemed to provide a basic ability to do this, but I again needed to make some minor mods to make it work with Blocs 5.

Iā€™ve attached another sample Blocs file for you to try out. It seems to work OK for me, but you are welcome to see if it works for you. Please let me know if you have any problems using it. I see that @PeteSharp also provided a potential solution, so you should use the solution that works best for you.

Take care.

pruthe

p.s. @loepi, you might want to try this new solution too on your project.

Tab Links Other Page-bs5-v2.bloc (140.2 KB)

1 Like

@pruthe yeah, I made a bric for this a few years back, pre Bootstrap 5. I never got around to updating it for BS5, although James had requested it a few times. I had never released it either. The updated version has multiple options.

2 Likes

Thank you. I found that while it works great when clicking the links you setup on a DIFFERENT PAGE, it only works one time when you use the same links on the SAME PAGE as the tabbed content.

Here is a modified version of your document which shows the problem:

Tab Links Other Page-bs5-v2 JDW.bloc.zip (64.7 KB)

STEPS:

  1. Open the above document.
  2. Preview in Blocs.
  3. Click one of the links at top.
  4. Scroll back up and click on another link. None of those links work anymore.

The reason this is important is because when you want to link to tabbed content, you will sometimes link from a different page, and other times link to tabbed content on the same page.

1 Like