Activate current vertical tab from URL fragment

I'm pretty sure this is a bug and not a feature request.
I could be wrong, but it seems fairly important.
Jen

+1 for this
It comes in handy when inserting links to profile fields saying "You haven't added you birthday yet. Add it here"

+ 1
bump

Minor annoyance, but this is a feature request. Patches welcome. :)

Here's the patch for the D6 module, but I'd like to see this fixed in D7 as well.

Patch for D7

This looks good. One caveat is that there is already some code to keep you on the same tab when you submit a form. and that should continue to work. so, if i get sent to a tabbed page with #some_tab and then i open up #other_tab and submit the form, i want #other_tab to stay open.

Won't you lose the URL fragment when you submit a form (with node edit form you do)? In that case it'll re-activate the tab you had active before.

I moved this check before the hidden input (.vertical-tabs-active-tab) as it seems that that input is always present in node edit forms.

Tried #5 and it worked but one small problem - the right pane was selected but none of the content was shown.

Re-rolled a patch and fixed the issue by changing around the order some - I put the hide statement for all the panes first and then put the code in for the fragment piece. Only tested on the node edit form using Vertical Tabs 6.x-1.0-rc1.

in this included in drupal 6? or do i still need to patch the latest release to get it to work

Is there a way to remember the last opened vtab, based on hash, after form submit, in 6.x?

Lets fix this first in D7...

Re-upload last d7 patch - #6

this will do nicely. thanks.

Committed to CVS HEAD. Thanks.

Moving to backport to D6, and then I will move this back to the Drupal queue once backported.

I applied #9 fragment-D6.patch for my D6 installation and it works fine if the URL (with anchor) was called from a different page, but it doesn't switch tabs if the tab is on the same page. Also, it would be nice UI experience if the page scroll down automatically and highlight the active tab.

If that worked as you described then it doesn't need a port.

If that worked as you described then it doesn't need a port.

It would be nice if the d6 patch in #9 could be committed. I just tested it on one of our d6 sites, and it seemed to work fine with the caveat (#19) that, on the node edit form, hand crafted links don't work unless you do something special.

I think the code in #9 only handles initial page load and that the vertical tabs way is to have the initiating link trigger the action. For example, in vt code, it does something like this.

      $('<li class="vertical-tab-button"><a href="#' + k + '" class="' + cssClass + '"><strong>'+ v.name + '</strong>' + summary +'</a></li>').appendTo(ul)
        .find('a')
        .bind('click', function() {
          $(this).parent().addClass('selected').siblings().removeClass('selected');
          $('.vertical-tabs-' + k).show().siblings('.vertical-tabs-pane').hide();
          return false;
      });

If you want to make custom links drive vertical tabs from the same page, putting something like this in the onclick handler works (although you wouldn't want it on an external page). I'm guessing this is probably not something one would want vertical tabs to do automatically.

$('.vertical-tabs-list-".$fieldset."').parent().addClass('selected').siblings().removeClass('selected');
$('.vertical-tabs-".$fieldset."').show().siblings('.vertical-tabs-pane').hide();

I think patch at #9 is fine for Drupal 6. Just tried it and works fine. Could someone commit??

#9 needs a re-roll for rc2

update: woops, never mind me -- works against the -dev

subscribe

yes, it would be great to get this committed. very useful.

I see that this has been implemented, but it doesn't work with vertical or horizontal tabs.

I must be missing something, because it seems like this line:

if (window.location.hash && $(window.location.hash, this).length) {

Will never select anything with the second statement. The fieldgroups aren't generated with any IDs. If I manually edit that selector to target something else, or alter the markup myself, I can get this to work. However, it's definitely not functioning by itself.

D7.9, FieldGroups 1.1 .. running on IIS, if it matters.

Okay, cancel that. I finally figured out what it's attempting to target.

I was under the impression it was looking for a reasonably formed ID / the name of the tab. Now I see it's looking for a mangled, non-restful underscore nightmare. I'm probably on my own from here, but it seems like those tab IDs should be the names that you assign in the content type admin..

Hi

From #19 :

Also, it would be nice UI experience if the page scroll down automatically and highlight the active tab.

Me too.

El B

@29

Here's a snippet that I used for that:

  /* if this is an edit page and fragment was specified, scroll to vertical tabs */  
  var url = location.pathname;
    if (url.indexOf('/edit') && window.location.hash.length > 0) {
      /* this waits until all of the other jQuery has loaded, e.g., vertical tabs */      
      $(window).load(function(){ $('html, body', context).animate({ scrollTop: $('.vertical-tabs').offset().top });
      $('.vertical-tab-button a[href="' + window.location.hash + '"]', context).click();
    });
  }

I've been unable to implement this feature in D7 or find a working example of code. What I've tried:

1. I've created a content type with several fieldsets configured as vertical tabs (ed: group_set1, group_set2, group_set3).
2. On a separate page I've created a link to the the node edit form using the pattern http://www.example.com/node/11/edit#group_set2.
3. The link opens the form but does not select the designated vertical tab. The default tab 1 is active.
4. I looked in the code expecting for find unique CSS IDs for each of the vertical tabs, but could only find the following css classes: vertical-tab-button, first, last, selected.

DUH moment - It wasn't until I posted this comment that I noticed that this issue thread was for a Drupal 6 module and not for the vertical tabs that is part of core Drupal 7. I could not find an issue in Drupal 7 Core for this feature, so I've created a feature request here: http://drupal.org/node/1615474

At this point, other that attempting to submit a patch to D7 Core, I don't know what else I can do. Still ideas and suggestions are welcome. Thanks in advance.

Chris

RE #31 - #15 was committed with http://cgit.drupalcode.org/drupal/commit/?id=093f99a794e0ff6107fbd052560... and you can use the name of the vertical tab as the hash, in my experience though, it is case sensitive, maybe this shouldn't be case sensitive.

Here is an example if you have a tab named 'Vertical Tab Name':
#Vertical Tab Name
#Vertical+Tab+Name

#Vertical tab name (will not work)

@cluther - I know this is 4 years later but I submitted a follow up issue to update the URL bar with the hash when a vertical tab is selected. This will show how to link them. We should open a new issue to make them case insensitive, since URLs in Drupal 7 are also case-insensitive.

#2752511: Update location.hash when clicking a vertical tab