Field types

Accordion and Tab

Last updated Oct 3, 20263 min read

Tab and Accordion only change how a field group looks on the edit screen. They create no database column and hold no value: wpmcf_get_field() returns null for them and nothing is printed on your site.

	Tab	Accordion
Type id	`tab`	`accordion`
Builder category	Layout	Layout
Looks like	A row (or column) of tab buttons; each tab shows its own fields	A collapsible section with a title bar
Column	none	none

How they work

A layout field acts as a divider: every field that comes after it, up to the next layout field, belongs to its section. The label of the field becomes the tab title or the accordion title.

Tab: General                 ← starts the "General" tab
  Headline (Text)
  Intro (Text area)
Tab: Details                 ← starts the "Details" tab
  Price (Number)
  Accordion: Shipping        ← collapsible section inside the "Details" tab
    Weight (Number)
    Box size (Text)
  Accordion: Warranty
    Months (Number)

Place the layout fields in the field list with the same drag handles as normal fields. Layout fields have no required, default, validation, SQL or conditional logic options; those are dropped when the group is saved.

Tab

Consecutive tabs form one tab list. Editors click a tab button to show its fields.

Setting	Default	Effect
Tab position	Above the fields	Above the fields or Left of the fields. "The first tab of a tab list decides where the whole list is shown."
Close the tabs	Off	Makes this tab an end marker: it ends the tab list, and "the fields after this one are shown below the tabs; its own label is not shown." Use it to put fields (such as a save-related note) under the whole tab area.

Without JavaScript every tab panel is shown, each under its title.

Accordion

An accordion is a section with a title bar that expands and collapses. The bar shows a count of the fields inside and a required marker when the section has required fields.

Setting	Default	Effect
Open by default	Off	The section starts expanded.
Close the other accordions when opened	Off	"Only one of the accordions next to each other that have this setting stays open." Opening one closes the others in the same row of accordions.
Close the previous accordion	Off	Makes this an end marker: the fields after it "go back to the surrounding tab, or to the top level; its own label is not shown."

How tabs and accordions nest

An accordion placed after a tab stays inside that tab's panel.
A new tab closes any accordion that is still open and starts the next panel of the same tab list.
An accordion end marker closes only the accordion. A tab end marker closes the whole tab list.
You cannot put a tab inside an accordion: a tab always closes the open accordion first.

Tabs and accordions also work inside the sub-fields of a Group or Repeater, to structure their rows.

Where they appear

They appear wherever the group's fields are edited: post, user, term, comment, widget and options page screens. In front-end forms (Pro) layout fields are skipped and the fields simply follow each other.

Template usage

There is nothing to read or print. Use the fields inside the sections as usual:

php

$price = wpmcf_get_field( 'product', 'price' );   // field after the "Details" tab
$tab   = wpmcf_get_field( 'product', 'details_tab' ); // null: tabs have no value

Troubleshooting

My tab shows no fields. Fields belong to the layout field above them. Move the fields below the tab in the field list.
A field I wanted at the bottom is inside the last tab. Add a Tab with Close the tabs after the last tab, then the field.

Was this page helpful?

Still stuck? Contact support