Disclaimer: I'm not sure weather this issue rather belongs to field_group, colorbox oder colorbox_node, sorry if I'm wrong here.

I'm using colorbox_node to open nodes listed by a view inside a colorbox overlay.
My content type's fields are grouped into horizontal tabs. Tabs are called "A", "B" and "C".

When viewing a node on its own the horizontal tabs work just as expected, they're simpy labeld "A", "B" and "C".

As soon as nodes are opened inside a colorbox those tab labels get either "Show" or "Hide" strings prepended, depending on weather the horizontal tab element is set to open or collapsed in the display settings. So the tabs look like "Hide A", "Hide B", "Hide C".

That string isn't wrapped inside any kind of markup so I can't find a way to hide this (but using a string function to search and replace, which I rather wouldn't wanna do).

Here's the (correctly) rendered output when viewing a node *not* inside a colorbox:

<ul class="horizontal-tabs-list">
  <li class="horizontal-tab-button horizontal-tab-button-0 first" tabindex="-1">
    <a href="#">
      <strong>A</strong>
      <span class="summary"></span>
    </a>
  </li>
  <li class="horizontal-tab-button horizontal-tab-button-1 selected" tabindex="-1">
    <a href="#">
      <strong>B</strong>
      <span class="summary"></span>
      <span id="active-horizontal-tab" class="element-invisible">(aktiver Reiter)</span>
    </a>
  </li>
  <li class="horizontal-tab-button horizontal-tab-button-2 last" tabindex="-1">
    <a href="#">
      <strong>C</strong>
      <span class="summary"></span>
    </a>
  </li>
</ul>

And this is what get's rendered within a colorbox:

<ul class="horizontal-tabs-list">
  <li class="horizontal-tab-button horizontal-tab-button-0 first selected" tabindex="-1">
    <a href="#">
      <strong>Hide A</strong>
      <span class="summary"></span>
      <span id="active-horizontal-tab" class="element-invisible">(aktiver Reiter)</span>
    </a>
  </li>
  <li class="horizontal-tab-button horizontal-tab-button-1" tabindex="-1">
    <a href="#">
      <strong>Hide B</strong>
      <span class="summary"></span>
    </a>
  </li>
  <li class="horizontal-tab-button horizontal-tab-button-2 last" tabindex="-1">
    <a href="#">
      <strong>Hide C</strong>
      <span class="summary"></span>
    </a>
  </li>
</ul>

Thanks for any hints pointing me somewhere :)

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Daniel Wentsch’s picture

Okay, I found a way to get rid of this behaviour by patching field_group/horizontal-tabs/horizontal-tabs.js to make sure the prefix (Show/Hide) gets removed from the DOM before setting the tab's title.

Daniel Wentsch’s picture

Issue summary: View changes

Added some bold formatting to highlight the problem

james.williams’s picture

I found the same issue when my field group horizontal tabs were brought into the page via an AJAX request, which I imagine is what colorbox does. The patch needs re-rolling so that it is made against the module code rather than the root of a Drupal install though. Also, an equivalent may need doing for vertical-tabs.js, but that's a core file.

james.williams’s picture

Version: 7.x-1.1 » 7.x-1.x-dev
FileSize
539 bytes

Here's a re-rolled patch :-)

kenorb’s picture

Status: Active » Needs review

Chris Matthews’s picture

Status: Needs review » Needs work
Issue tags: +Needs reroll

The 3 year old patch in #3 to horizontal-tabs.js does not apply to the latest field_group 7.x-1.x-dev and needs a reroll (if still applicable).

Checking patch horizontal-tabs/horizontal-tabs.js...
error: while searching for:
?
      // Transform each fieldset into a tab.?
      $fieldsets.each(function (i) {?
        var horizontal_tab = new Drupal.horizontalTab({?
          title: $('> legend', this).text(),?
          fieldset: $(this)?

error: patch failed: horizontal-tabs/horizontal-tabs.js:29
error: horizontal-tabs/horizontal-tabs.js: patch does not apply
Steven Jones’s picture

Status: Needs work » Closed (duplicate)
Steven Jones’s picture