Linking to a tab and then to a specific panel within that tab

I am running into another problem with the redesign of a website I am working on. There are bi-weekly news items that are placed on the index page. Previously linking to the specific tab worked just fine using <a href="somepage.html#sometab>info</a>.

Now I have added accordion panels within the tabbed content. So I need the link to go to the specific tab first and then to the specific panel. I did find code that worked for opening the specific panel but does not work due to the panel being within a tab.

$(document).ready(function() { var idToToggle = window.location.hash.replace("#", ""); $("#" + idToToggle ).collapse('show'); window.scrollTo(0, 0); });

Here is the code to link to a specific tab

(function activateTabFromHash() { if (location.hash) { var tabLink = document.querySelector('a[href="' + location.hash + '"]'); if (!tabLink) { return false; } tabLink.click(); if (location.hash) { setTimeout(function() { window.scrollTo(0, 0); }, 1); } } })();

The link would be changed to

<a href="somepage.html#collapsenumber>info</a>.

How do I combine the two?

Is it possible to have it open all accordions in any tab? The user only sees the active tab, but this could have side effects.

Not sure what you mean, Micah. What I need is a specific panel in an accordion that is in a specific tab.

Ah, got ya, I didn’t follow at first. I feel like I’ve done in the past. I’ll see if I can locate my code and get back to ya.

Thank you. Just to make sure it’s clear, the user clicks on a link on the index page. The link takes them to tab b, panel c on another page.

Micah, were you able to find your code? I am still trying to figure out how to get this to work.

To reiterate here is what I need to happen…

User clicks on link on index page. That link is on such and such page in tab b in panel c. The JS and link have to work to be able to take the user directly to tab b panel c (panel c open). Anyone else figure out how to get this to work?

depends on your tab component. There is the :target selector that is triggered by an URL’s fragment.

I do not know how to code JS so how would this be coded? Here is an example -

http://sacramentgame.com/

Under Information Release 15, there is a link to City PvP. The PvP tab is #pvp. The City PvP accordion is #collapse10. Right now the user has to click PvP on the Game Info page, then the City PvP panel is open for them to read.

Well I tried to remove tabs completely and because there are sub panels now, it is still not working. The link would have to go to panel 3 (#collapse3), sub panel #collapseTwoEight as an example. Linking like this doesn’t work -

<a href="page.html#collapse3#collapseTwoEight">some info</a>

This is frustrating. Tabs and accordions are cool but trying to link to them is what is frustrating me.

To further complicate things, I don’t use data-parent so that the user can have several panels open at once and manually choose which ones to close.

Can anyone help me figure this out? As stated before, I don’t know how to code JS myself. If it is not possible to link to a tab and then a panel or sub panel within an accordion, please let me know.

of course not. there can only be one fragment identifier. see RFC 3986 (and RFC 1738 concerning the # symbol)

Dormilich, so what you are telling me is this cannot be coded because of the 2 different “identifiers”. The tab # and the collapse #.

If I take out tabs and just use accordions, I still run into a problem opening an accordion within another accordion. I found this on stackoverflow.com. The OP was asking if JS was needed to activate the linking from another page. Another person posted this code -

$(document).ready(function () {
  location.hash && $(location.hash + '.collapse').collapse('show');
});

Someone else came back and said that he added functionality to open an accordion within an accordion. That code is below. I am trying to understand what is going on in this code. Not sure if the 2 examples need to be combined or if the code below is based off of the code above.

$(document).ready(function () {
  if (location.hash){
    $(location.hash).collapse('show');
    $(location.hash).parents('.accordion-body').collapse('show');
  }
});

Here is the link to the entire post - http://stackoverflow.com/questions/12008389/linking-to-a-section-of-an-accordion-from-another-page.

Must you use a hash?

Have you tried using a GET variable(s) instead?

Or maybe try a hash that opens one instead of multiple closings.

I am sorry, Mittineague, I don’t understand what you are trying to say. I am using Bootstrap framework and have been following how to setup tabs and accordions. All examples I have found use the hash. I don’t write JS so how would you write a piece of code do to what I need using a GET variable(s).

Ah, sorry, I am unfamiliar with using Bootstrap so I don’t know what its limitations might be.

with Bootstrap you need an explicit click event on the “tab header”. so you could use the URL fragment to open the correct tab (but a query parameter would work as well). then you would have JS scroll to the desired position.

How would this be coded?

http://api.jquery.com/scrollTop/

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.