This video builds a tab set from paragraphs and then turns it from horizontal to vertical with a single checkbox.
The two pieces
A Tabs paragraph is the wrapper; a Tab Section paragraph is one tab. The wrapper's field accepts Tab Sections and nothing else. Every section needs a Tab Section Name, which is required because it becomes the text on the tab button, and a Tab Section Body that will hold any bundle you have installed.
The three display settings
- Vertical Tabs — tick it and the buttons stack down the side instead of running across the top.
- Animated Tab — six entrance effects for the revealed panel.
- Active Tab Background — the colour of the currently selected button, chosen from 30.
Identifiers, and why several tab sets coexist
The wrapper takes an id built from the paragraph entity id, and every button and panel id is derived from it. The script then scopes its queries to that wrapper before hiding panels or clearing the active class. The practical result: you can drop four independent tab sets into one node and clicking a tab in the third one leaves the other three alone. The first button is marked active on load, so a tab set is never rendered empty.
Markup-wise, buttons carry role="tab" and panels carry role="tabpanel" inside a tablist. The W3CSS Paragraphs module page lists the rest of the bundles that can be nested inside a tab.
Tabs driven by a View
If your tab contents are really a query result, Views Tabs builds tabs from a View instead, at the cost of needing Drupal 11.3 or later. The module in this video runs on Drupal 10, 11 and 12, so it stays available to sites that have not made that jump yet. Pair it with the W3CSS Theme for the matching base styles.
Need this built into your own site? See Drupal development services, or request a quote.
