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.
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?
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 -
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.
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 -
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');
}
});
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).
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.