Tabs & Accordions for Gutenberg: Documentation

Live Preview in the editor makes it easy and intuitive to make changes to the content.  There may be some differences from the ‘published’ view, depending on how your theme and other plugins are configured, but in essence you can edit tab labels and content directly in the Live Preview area.

To add tabs or accordion items, select the “Tabs or Accordion” block (this is easiest in List View) and then click the Add Tab or Add Accordion Item button. Alternatively, simply duplicate one of the child “Tab” blocks. (Open block options menu, which has the triple-dot-icon, and click “Duplicate”).

To remove a tab, just remove the tab block. (Open block options menu, which has the triple-dot-icon, and click “Remove Tab”, or select the tab in List View and hit Delete).

  • Tab / accordion item labels
    To change a tab label, select the Tab block (either in List View, or by clicking the tab label you want to edit). In the Block options panel on the right, edit the Label field and you’ll see the label update in the Live Preview.
  • Tab content
    You can add content simply by adding paragraphs or blocks as children of each Tab block.

To change the Layout of your tabs/accordion just use the dropdown in the Block options of the “Tabs or Accordion” block when editing with Gutenberg.

View demos of horizontal, vertical, and accordion layouts

To change the Theme of your tabs/accordion just use the dropdown in the Block options of the “Tabs or Accordion” block when editing with Gutenberg.

View demos of the Basic, Tabby, and Minimal themes.

  • Pro Only: For full control of the styles, there’s even a None/Custom “theme” which strips away all the styles so you can more easily supply your own. If you use this, you will need to supply ALL your own CSS styles, including for hiding inactive tabs.

Horizontal layout

  • Horizontal Tabs: Responsive Behavior
    By selecting from this dropdown list, you can control the responsive behavior when the tabs won’t fit in one line based on the width of the container.
    • Collapse to Accordion (default)
      Select this to automatically collapse to an accordion.
    • Wrap
      Select this to just wrap the tab buttons
    • none
      Select this to have the plugin not try to detect whether or not there is enough room for the tabs in a single line.  Depending on your theme, this may result in a horizontal scrollbar unless you add some custom CSS to handle these situations.

Vertical layout

You can specify the width of the columns via the following options:

  • Vertical Tab List Width
    Controls the width of the column containing the tab buttons.  Value should be CSS units (e.g. 25%)
  • Vertical Tab Content Width
    Controls the width of the column containing the tab buttons. 
    Value should be CSS units (e.g. 75%)

Accordion layout

The accordion works well for any screen size already.

 

  • Initially Active Tab (Pro Only)
    For Vertical and Horizontal tab layouts, you will see this option in the “Tabs or Accordion” block settings.   By default, the first tab will be open – select another tab from the dropdown if you wish to override this.

  • Open Initially (Pro Only – Accordion layout only)
    For Accordion layouts, the “Open Initially” checkbox can be found in block options for the “Tab” block.  This option can be used to show one or more accordion items upon page load.   By default all accordion items are collapsed.

By default the Auto Close Accordion Items dropdown, found in the block options of the “Tabs or Accordion” block, is set to true, meaning that when you click an accordion item’s header button, any other accordion items in the containing accordion will close/collapse.  Select false from the dropdown if you want the end user to be able to view/expand multiple items at a time.

Live Preview in the editor makes it easy and intuitive to make changes to the content.  There may be some differences from the ‘published’ view, depending on how your theme and other plugins are configured, but in essence you can edit tab labels and content directly in the Live Preview area.

To add tabs or accordion items, select the “Tabs or Accordion” block (this is easiest in List View) and then click the Add Tab or Add Accordion Item button. Alternatively, simply duplicate one of the child “Tab” blocks. (Open block options menu, which has the triple-dot-icon, and click “Duplicate”).

To remove a tab, just remove the tab block. (Open block options menu, which has the triple-dot-icon, and click “Remove Tab”, or select the tab in List View and hit Delete).

  • Tab / accordion item labels
    To change a tab label, select the Tab block (either in List View, or by clicking the tab label you want to edit). In the Block options panel on the right, edit the Label field and you’ll see the label update in the Live Preview.
  • Tab content
    You can add content simply by adding paragraphs or blocks as children of each Tab block.

To change the Layout of your tabs/accordion just use the dropdown in the Block options of the “Tabs or Accordion” block when editing with Gutenberg.

View demos of horizontal, vertical, and accordion layouts

To change the Theme of your tabs/accordion just use the dropdown in the Block options of the “Tabs or Accordion” block when editing with Gutenberg.

View demos of the Basic, Tabby, and Minimal themes.

Horizontal layout

  • Horizontal Tabs: Responsive Behavior
    By selecting from this dropdown list, you can control the responsive behavior when the tabs won’t fit in one line based on the width of the container.
    • Collapse to Accordion (default)
      Select this to automatically collapse to an accordion.
    • Wrap
      Select this to just wrap the tab buttons
    • none
      Select this to have the plugin not try to detect whether or not there is enough room for the tabs in a single line.  Depending on your theme, this may result in a horizontal scrollbar unless you add some custom CSS to handle these situations.

Vertical layout

You can specify the width of the columns via the following options:

  • Vertical Tab List Width
    Controls the width of the column containing the tab buttons.  Value should be CSS units (e.g. 25%)
  • Vertical Tab Content Width
    Controls the width of the column containing the tab buttons. 
    Value should be CSS units (e.g. 75%)

Accordion layout

The accordion works well for any screen size already.