Change URL using anchors when opening a tab

Funny, there was sprint yesterday, and we where discussing the same feature.

Yeah, just working on that, will be coming soon I hope

Well, this was committed to 7.x-1.x, please don't use 2.x version, it is not supported!
The url changing actually just works for horizontal and vertical tabs! Maybe in a future version it will be working with any formatter.

Looking at the code the html needs a class of "group-wrapper", probably on the vertical tabs group, but the closest I have using vertical tabs is "field-group-tabs-wrapper". If I manually add the class "group-wrapper" to the vertical tabs group the hashes are set correctly. Although the URL shows the new hash tags after changing tabs there is no other effect, at least using Chrome, Opera or Firefox. Reloading the page with the hash tag as part of the URL has no effect on which tab is active and the browser's back button doesn't change the active tab only the URL.

This code:

var fieldgorupID = 'field_group-' + $(this).attr('id') + ' ' + $(this).attr('id');

causes the ID to be applied twice with a space in between each instance. Is this the desired behavior?

Unfortunately this violates the html5 spec stating that IDs can't contain spaces: http://www.w3.org/TR/html5/global-attributes.html#the-id-attribute

This is incorrect indeed. We'll check it asap

I know, this is totaly bad coding. But this is the only way to achive this, without having the page jumping to the anchor! Since it is in DOM I think it's not that bad, but still eval. If anyone has a better solution, would be great!

Hi, can anyone tell me what's about the 7.x-2.x version? Will it be supported, what's the best way to do it by myself? Since we can use IDs to jump to the tabs directly (very nice feature), it's the missing puzzle piece ;)

Yes, seconding dropfen, would like to get more clarification on how to accomplish this

I've found that in field_group/horizontal-tabs/horizontal-tabs.js, if you add the following after the call to "self.focus();" on line 80:

    var pos = $(window).scrollTop();
    location.hash = jQuery(this).attr('href');
    $(window).scrollTop(pos);

...you can do this. I mean, it's a quick hack, I'm not sure if there's a better way to manage this, or if someone should just submit this as a patch.

The attached patch changes the page url without affecting the scroll position. It also handles hash change events on forward/back navigation to update the selected tab.

IDs on the page should be unique, and the behaviour of this patch is undetermined if that is not actually the case.

This is probably something that should be configurable though, as I can see some people not wanting tab changes to be reflected in the navigation history.

The last patch had an issue with the initial load of the page and handling going back to the un-hashed url, so here's a bit of a better structured approach

**RTBM** - Works great here!

The older patch was out of sync with current file. Revised patch for horizontal-tabs.js

The attached patch changes the page url without affecting the scroll position. It also handles hash change events on forward/back navigation to update the selected tab.

I have the same problem like gapple in comment #12.

If I have two horizontal tabs, tab number 1 contains a separate link (e.g. inside a text field) linked to tab number 2. Now the user clicks on the link. The anchor is changing, but nothing else happens. The scroll position is still the same.

IMHO it's a good idea to fix this issue for improving the user experience.
Perhaps the revised patch of comment #17 should reviewed by the community, so I change the issue status.

The patch at #12 is still valid for D8.1.1. I don't know if it would apply as I've done it manually.
It doesn't matter much for node edit forms but it's very useful for frontend ui.

I could not apply the patch #17 successfully on 7.x-1.x so I created a new patch. Nothing of the code has been changed and it seem to work so far.
Maybe someone can review and test the patch to get this committed or can be worked on.

This patch will pass testing after #2871785: Tests failing in Drupal 7.50+ is committed.

Patch #17 works fine for me too.
I use Field Group 7.x-1.5 and Drupal 7.54

Thanks @toamit

...It does not work when I submit the form.
If i click on submit button and there is an error, the page is loaded with the first tab...

Stripped ^M off of patch so that it applies.

Patch is working for me.