We're working on a page that has horizontal tabs configured using Field group. When you put in the ID of the fieldset (for e.g. #node_product_full_group_tabs_item_1) in the URL, the page loads with that tab open, as expected. Unfortunately, it also loads the page with the horizontal tabs out of sight and the content for that tab at the very top of the browser. It's doing what it's supposed to be doing, scrolling the page to the anchor.

We'd like to be able to simply load the page with the correct tab opened but have the browser load the full page and show the full page with the top of it in view. How could we do that?

(Further, we'd love to be able to have SEO friendly URLs, so we thought of doing something like /product/detail#manual in the URL, and being able to map that to the tabe with ID #node_product_full_group_tabs_item_1, for example.)

Can anyone help with suggestions please?

Comments

MPeli’s picture

I would appreciate the same feature. I need a link to particular tab.

MPeli’s picture

Hello,

I started working on adding anchors to horizontal tabs. The following code allows the admin to attach a custom id to a fieldset.

Could you please implement this code to the dev version of Field group?
file field_group.module

function field_group_field_group_format_settings($group) {
// ...
    case 'htab':
	  $form['instance_settings']['custom_id'] = array(
		'#title' => t('Custom id'),
		'#type' => 'textfield',
		'#default_value' => isset($group->format_settings['instance_settings']['custom_id']) ? $group->format_settings['instance_settings']['custom_id'] : (isset($formatter['instance_settings']['custom_id']) ? $formatter['instance_settings']['custom_id'] : ''),
		'#weight' => 0,
	  );
    case 'accordion-item':
    default:
  }

  return $form;
}

file field_group.module


function field_group_field_group_pre_render(& $element, &$group, & $form) {
// ...
  if(isset($group->format_settings['instance_settings']['custom_id'])) {
	  $element['#id'] = $group->format_settings['instance_settings']['custom_id'];
  }
  elseif (isset($group->format_settings['instance_settings']['id']) && !empty($group->format_settings['instance_settings']['id'])) {
    $element['#id'] = $group->format_settings['instance_settings']['id'];
  }
  else {
    $element['#id'] = $form['#entity_type'] . '_' . $form['#bundle'] . '_' . $view_mode . '_' . $group->group_name;
  }
// ...

The next step should be modifying horizontal tabs module. Unfortunately, there is no stable or dev release.
#1519640: Horizontal tabs not working
#1034690: Add a horizontal tabs element

Thank you, Martin

malbone’s picture

So, why do we need to be providing new libraries for tabs or htabs. Why, are we going to have the elements module provide the library? This is all built into drupal core.

I have been using field group, because it IS a very convenient, quick way to group and nest fields. The tabs and accordions are great, but there does need to be a way to provide a custom ID for the tabs, so that you can link to a specific tab.

I just wonder why are we going in this direction of replicating libraries that already exist?

Hydra’s picture

Status: Active » Closed (fixed)

Every horizontal and vertical tab is having an unique ID. They are added now to the url has as well and we did it so, that on page load or click event on a tab, it is not jumping to the anchor, just opening it by default: http://drupal.org/node/1747804#comment-6383540
I believe this issue should be fix with this commit.

sammos’s picture

Issue summary: View changes

Hi, I'm using the 7.x dev version (updated today to see this this would fix it) and I'm finding the undesired behavior when using the ID tag of a field group with the URL. It does open the requested fieldgroup but it does treat it like an anchor, instead of displaying the full page. I would LOVE to be able to use links to access horizontal tabs.

Thanks for a great module!

jiv_e’s picture

Issue summary: View changes
FileSize
49.82 KB
112.28 KB

I'm still having this exact same problem with field_group 7.x-1.5.

Is see this code inside horizontal-tabs.js:

      ...
      var focusID = $(':hidden.horizontal-tabs-active-tab', this).val();
      ...
        ...
        if (this.id == focusID) {
          tab_focus = $(this);
        }
        ...

I found no documentation about this. I suppose I have to make a hidden input field with class .horizontal-tabs-active-tab and set the tab ID there. But I have two problems. First there are no IDs on the tabs and no way to set them through field UI. Secondly how am I supposed to insert the right ID to this field? Do I have to write some glue code to read the value from URL hash and insert it into the hidden field?

Sounds very hard. I'll attach some screenshots to clarify.

What am I missing? Can this be reopened?

jiv_e’s picture

Issue summary: View changes
FileSize
652 bytes

Here's a patch for those who just want a quick hack to solve this.

jiv_e’s picture

Oops.. that won't work so well. :)

Here's a better one.

hoporr’s picture

I had the same problem with 7.x-1.5 -- the JS refers to something that cannot be set.

Since I cannot reopen this issue, I opened another one: https://www.drupal.org/node/2884058

For anybody who may need help with this issue, I was able to get this to work by adding IDs in the code. Maybe this can also be done using various hooks that are provided by field_group, but this here did the trick for me. In form_alter, I added this, which sets the IDs for the tabs:

$form['#groups']['group_step-zero']->format_settings['instance_settings']['id']  = 'group-step-zero';
$form['#groups']['group_step_one']->format_settings['instance_settings']['id']   = 'group-step-one';
$form['#groups']['group_step_two']->format_settings['instance_settings']['id']   = 'group-step-two';
...

When I then set the current ID using the trick with the #hidden field, the form correcly displayed:

$form['active_horizontal_tab'] = array(
    '#attributes' => array('class' => 'horizontal-tabs-active-tab'),
    '#type'       => 'hidden',
    '#value'      => ' ... one of the ids form the above list ...'
  );