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).
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.
You can specify the width of the columns via the following options:
The accordion works well for any screen size already.
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.