Contrib.social

Compatibility with Field Group module

Open on Drupal.org →
Created on 5 September 2025, about 1 month ago

Problem/Motivation

When embedding a view (with Page or Embed display) that contains Field Group horizontal tabs into a VVJT tabbed view, the Field Group tabs fail to initialize properly and render as plain <details> summary elements instead of horizontal tabs. This appears to be due to a JavaScript conflict or lack of re-initialization: Field Group’s JS (which converts to tabs) isn’t triggered after VVJT renders the content.
This breaks the expected tabbed layout in nested scenarios, making the content display as accordions rather than tabs.

Steps to reproduce

1. Create a content type (e.g., “Test Content”).
2. Install the Field Group module and add a horizontal tabs group to the content type. Create tabs like “Tab1” and “Tab2”, and add fields to each tab.
3. Create a few nodes of this content type.
4. Create a new view for this content type and set the display to VVJT tabs (e.g., tabs from left).
5. The view should display node titles as tabs.
6. In the view, switch to a Page or Embed display and set it to render the full node (e.g., Teaser or Full view mode) of your content type, which includes the Field Group tabs.
7. Create another view (or page) where you embed this view into one of the VVJT tabs (e.g., using a custom field or render view embed).
8. Load the page with VVJT tabs: The VVJT tabs work fine, but the nested Field Group tabs inside the embedded content have changed to elements because Field Group’s JavaScript doesn’t initialize them properly.

Field Group horizontal tabs should render correctly (as tabs, not <details>) even when nested inside VVJT tabs.

Proposed resolution

Add compatibility in VVJT’s JavaScript to manually trigger Field Group’s tab initialization after rendering the tabs. For example, after the tab content loads, re-attach Drupal behaviors for Field Group (e.g., calling Drupal.behaviors.fieldGroupHorizontalTabs.attach() on the nested context). This could resolve the issue without major changes.
I’m happy to test a patch or provide more details/logs if needed.

📌 Task
Status

Active

Version

1.0

Component

Code

Created by

🇸🇰Slovakia coaston

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @coaston
  • Comment about 1 month ago →
    🇸🇰Slovakia coaston

    I just tested with Views Vanilla JavaScript Tabs only for 2 views. Separetelly both views works fine, but if you try embed one view into another the second view will change"Views Vanilla JavaScript Tabs" into "href" only.

    and if I render one view to antoher - tabs will be changed to href:

  • Comment about 1 month ago →
    🇺🇸United States flashwebcenter Austin TX

    Nesting a view block inside another view block

    1. Install module: Download and enable Views Field View — https://www.drupal.org/project/views_field_view → .
    2. Content & display: Use the Article content type and the Teaser view mode. In Manage display (Teaser), add a Field Group configured as Vertical tabs or Horizontal tabs, and place your fields inside those tabs.

    Create the Views

    A. Inner view

    • Create a Block display that renders Article in Teaser mode (so the Field Group tabs are present).

    B. Outer view (VVJT tabs)

    • Create a view that uses the VVJT Tabs format.
    • Use Title as the tab label.
    • Add a second field using View: View (from Views Field View) and select the Inner view’s Block display.
    • This embeds the Inner view under each VVJT tab.

    Place & Test

    • Place the Outer view block on a page and test.
    • You should see VVJT tabs on the outside, and the Field Group tabs inside each tab’s content.

    Notes / Demo

    • In my demo, I’ve nested a view block inside another view block. The inner block shows the Article teaser with a Field Group set to Vertical tabs. Both VVJT tabs (outer) and Field Group tabs (inner) work correctly. Here is the demo bottom of this page https://unitedstarsofamerica.com/node/87

    If your setup differs

    • Please reproduce on a fresh Drupal install using the default Article content type.
    • Export the created views and share the exports. That way I can import them into a clean site and run the exact test you’re using.

    Best wishes,
    Alaa

  • Comment about 1 month ago →
    🇸🇰Slovakia coaston

    Thank you so much for your detailed step by step.

    I am not using a view field view module, just simple twig:

    {% set nidid = nid|render|striptags|spaceless %}
    {{ drupal_view('view_name', 'embed_1',nidid) }}

    However when I change "embed_1" to "block_1'" it works as expected.
    So once again Thank you.

  • Comment about 1 month ago →
    System Message

    Now that this issue is closed, please review the contribution record.

    As a contributor, attribute any organization helped you, or if you volunteered your own time.

    Maintainers, please credit people who helped resolve this issue.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024