tabs + accordions

for Gutenberg

Free

$ 0 forever
  • Gutenberg-compatible
  • Live Preview in the editor makes it easy and intuitive to make changes to the content.
  • Easily switch between Layouts: Horizontal Tabs, Vertical Tabs
    and Accordion
  • Global Settings page allows you to set your own site-wide defaults for any of the settings, such as Layout and Theme
  • HTML support for the tab labels and accordion headers
  • Add any type of Block as your content (not just HTML/text)
  • Easily reorder tabs / accordion items
  • Theming: Comes with three built-in themes to help you get started: Basic, Tabby, and Minimal. Inherits colors from core WordPress themes and Elementor.
  • Theming: Customize the tab/accordion block's theme to your liking by using the Customizer to generate CSS (see demo page)
  • Anchor tag support: ability to link to individual tabs using anchor tags
  • Supports browser navigation via Back/Next
  • Responsive design: Tabs automatically collapse to an accordion on smaller screens.

Pro

$ 29
99
/ 6 months
  • All the features from Free and much more:
  • Theming: Custom/None "theme" to remove the built-in styles, making it easier to supply all your own styling via custom CSS
  • Tabs: Set the tab to show initially via the "Initially Active Tab" option
  • Accordions: Allow more than one accordion item open at a time by unchecking "Auto Close Accordion Items"
  • Accordions: Specify the heading level via the "Accordion Heading Level" option
  • Accordions: Specify force an accordion item to be expanded initially via the "Open Initially" option
Popular

View Documentation

Examples

Horizontal (Default)

By default, horizontal tabs will collapse to an accordion layout if the tabs won’t fit given the width of its container. You can test that out here by resizing the example below using the vertical bar to the right of the example (hover over the example to see the drag handle).

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tortor lacus, feugiat at lectus a, blandit ullamcorper risus. Vestibulum vestibulum auctor gravida. Vivamus luctus eros sed lectus cursus, a vehicula turpis efficitur. Nam consectetur ipsum lectus, sed ultricies felis interdum in. Maecenas eu leo at ante gravida dictum in nec metus. Fusce rutrum sem in maximus ultricies. Proin consectetur odio leo, quis venenatis lectus semper mattis. Maecenas eleifend laoreet gravida. Vestibulum fermentum tincidunt ligula, id pharetra nunc imperdiet et. Aliquam sagittis fermentum metus, quis dictum augue commodo suscipit. Nullam sodales, purus sed porta tempus, magna orci scelerisque mi, vitae malesuada massa quam vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a tellus id dolor viverra tristique. Nullam eget elementum nisl. Vestibulum vitae augue sit amet orci semper blandit pretium nec nunc. Curabitur mollis nibh eget lobortis venenatis.

Maecenas hendrerit posuere feugiat. Suspendisse lorem ligula, fermentum vitae libero ac, fermentum pharetra sem. Nulla imperdiet condimentum leo, sed fringilla turpis porta et. Cras aliquam rutrum turpis. Donec in commodo metus. Ut sodales gravida lacus, vitae vulputate ex commodo sit amet. Morbi nulla urna, imperdiet sed est eleifend, blandit feugiat justo. Nam dapibus arcu vel condimentum lacinia. Etiam at lorem a est interdum imperdiet. Aliquam semper, magna eget dignissim luctus, leo sem vestibulum elit, non maximus diam sapien quis sapien. Donec at tortor eu neque tempus molestie in nec magna. Nunc eu est non urna placerat volutpat eu eu nunc. Suspendisse euismod nunc ut augue ultrices, quis facilisis sapien facilisis.

In at posuere enim. Maecenas fermentum eros eu mollis iaculis. Mauris ac sem sit amet urna bibendum rhoncus. Pellentesque eget tempor orci, eu pretium sapien. Fusce et odio eu metus pulvinar ornare ut nec elit. In mattis, est eu sollicitudin cursus, nulla enim pulvinar nisl, vel finibus dui enim sit amet elit. Integer in scelerisque enim, non convallis lorem. Nulla quis lorem at quam condimentum gravida. Donec varius nibh eu mi vestibulum rutrum.

Nullam pellentesque metus ac nisi pulvinar, eget varius nunc dapibus. Sed turpis sem, rutrum fermentum consequat vel, interdum id ex. Duis mollis ligula ac posuere lobortis. Quisque vestibulum justo ac urna mollis, at suscipit nisi ultrices. Proin iaculis est sit amet dapibus faucibus. Proin faucibus, diam non vulputate maximus, justo ex tristique nunc, in mollis augue enim in lorem. Mauris varius, lorem at efficitur malesuada, neque enim pulvinar arcu, aliquet imperdiet libero libero fringilla risus. Ut et eros ultricies, blandit magna in, facilisis urna. Curabitur vehicula nisl ut sagittis ultrices. Nulla vestibulum odio et posuere suscipit.

Etiam ac ipsum a purus elementum tincidunt a sit amet mi. Ut eleifend mauris at lorem euismod vehicula. Fusce aliquam feugiat eros, at volutpat sem tristique at. Curabitur risus magna, laoreet in lectus eu, tristique porta nisi. Vivamus nulla nulla, consequat sed iaculis nec, mattis eget libero. Sed facilisis consectetur nisl sit amet ornare. Nam scelerisque feugiat nisi at faucibus. In hac habitasse platea dictumst. Nullam sed semper urna.

Alternatively, you can set “Horizontal Tabs: Responsive Behavior” to Wrap to just let the tabs wrap:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tortor lacus, feugiat at lectus a, blandit ullamcorper risus. Vestibulum vestibulum auctor gravida. Vivamus luctus eros sed lectus cursus, a vehicula turpis efficitur. Nam consectetur ipsum lectus, sed ultricies felis interdum in. Maecenas eu leo at ante gravida dictum in nec metus. Fusce rutrum sem in maximus ultricies. Proin consectetur odio leo, quis venenatis lectus semper mattis. Maecenas eleifend laoreet gravida. Vestibulum fermentum tincidunt ligula, id pharetra nunc imperdiet et. Aliquam sagittis fermentum metus, quis dictum augue commodo suscipit. Nullam sodales, purus sed porta tempus, magna orci scelerisque mi, vitae malesuada massa quam vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a tellus id dolor viverra tristique. Nullam eget elementum nisl. Vestibulum vitae augue sit amet orci semper blandit pretium nec nunc. Curabitur mollis nibh eget lobortis venenatis.

Maecenas hendrerit posuere feugiat. Suspendisse lorem ligula, fermentum vitae libero ac, fermentum pharetra sem. Nulla imperdiet condimentum leo, sed fringilla turpis porta et. Cras aliquam rutrum turpis. Donec in commodo metus. Ut sodales gravida lacus, vitae vulputate ex commodo sit amet. Morbi nulla urna, imperdiet sed est eleifend, blandit feugiat justo. Nam dapibus arcu vel condimentum lacinia. Etiam at lorem a est interdum imperdiet. Aliquam semper, magna eget dignissim luctus, leo sem vestibulum elit, non maximus diam sapien quis sapien. Donec at tortor eu neque tempus molestie in nec magna. Nunc eu est non urna placerat volutpat eu eu nunc. Suspendisse euismod nunc ut augue ultrices, quis facilisis sapien facilisis.

In at posuere enim. Maecenas fermentum eros eu mollis iaculis. Mauris ac sem sit amet urna bibendum rhoncus. Pellentesque eget tempor orci, eu pretium sapien. Fusce et odio eu metus pulvinar ornare ut nec elit. In mattis, est eu sollicitudin cursus, nulla enim pulvinar nisl, vel finibus dui enim sit amet elit. Integer in scelerisque enim, non convallis lorem. Nulla quis lorem at quam condimentum gravida. Donec varius nibh eu mi vestibulum rutrum.

Nullam pellentesque metus ac nisi pulvinar, eget varius nunc dapibus. Sed turpis sem, rutrum fermentum consequat vel, interdum id ex. Duis mollis ligula ac posuere lobortis. Quisque vestibulum justo ac urna mollis, at suscipit nisi ultrices. Proin iaculis est sit amet dapibus faucibus. Proin faucibus, diam non vulputate maximus, justo ex tristique nunc, in mollis augue enim in lorem. Mauris varius, lorem at efficitur malesuada, neque enim pulvinar arcu, aliquet imperdiet libero libero fringilla risus. Ut et eros ultricies, blandit magna in, facilisis urna. Curabitur vehicula nisl ut sagittis ultrices. Nulla vestibulum odio et posuere suscipit.

Etiam ac ipsum a purus elementum tincidunt a sit amet mi. Ut eleifend mauris at lorem euismod vehicula. Fusce aliquam feugiat eros, at volutpat sem tristique at. Curabitur risus magna, laoreet in lectus eu, tristique porta nisi. Vivamus nulla nulla, consequat sed iaculis nec, mattis eget libero. Sed facilisis consectetur nisl sit amet ornare. Nam scelerisque feugiat nisi at faucibus. In hac habitasse platea dictumst. Nullam sed semper urna.

Vertical

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tortor lacus, feugiat at lectus a, blandit ullamcorper risus. Vestibulum vestibulum auctor gravida. Vivamus luctus eros sed lectus cursus, a vehicula turpis efficitur. Nam consectetur ipsum lectus, sed ultricies felis interdum in. Maecenas eu leo at ante gravida dictum in nec metus.

Fusce rutrum sem in maximus ultricies. Proin consectetur odio leo, quis venenatis lectus semper mattis. Maecenas eleifend laoreet gravida. Vestibulum fermentum tincidunt ligula, id pharetra nunc imperdiet et. Aliquam sagittis fermentum metus, quis dictum augue commodo suscipit. Nullam sodales, purus sed porta tempus, magna orci scelerisque mi, vitae malesuada massa quam vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a tellus id dolor viverra tristique. Nullam eget elementum nisl. Vestibulum vitae augue sit amet orci semper blandit pretium nec nunc. Curabitur mollis nibh eget lobortis venenatis.

Maecenas hendrerit posuere feugiat. Suspendisse lorem ligula, fermentum vitae libero ac, fermentum pharetra sem. Nulla imperdiet condimentum leo, sed fringilla turpis porta et. Cras aliquam rutrum turpis. Donec in commodo metus. Ut sodales gravida lacus, vitae vulputate ex commodo sit amet. Morbi nulla urna, imperdiet sed est eleifend, blandit feugiat justo. Nam dapibus arcu vel condimentum lacinia. Etiam at lorem a est interdum imperdiet. Aliquam semper, magna eget dignissim luctus, leo sem vestibulum elit, non maximus diam sapien quis sapien. Donec at tortor eu neque tempus molestie in nec magna. Nunc eu est non urna placerat volutpat eu eu nunc. Suspendisse euismod nunc ut augue ultrices, quis facilisis sapien facilisis.

In at posuere enim. Maecenas fermentum eros eu mollis iaculis. Mauris ac sem sit amet urna bibendum rhoncus. Pellentesque eget tempor orci, eu pretium sapien. Fusce et odio eu metus pulvinar ornare ut nec elit. In mattis, est eu sollicitudin cursus, nulla enim pulvinar nisl, vel finibus dui enim sit amet elit. Integer in scelerisque enim, non convallis lorem. Nulla quis lorem at quam condimentum gravida. Donec varius nibh eu mi vestibulum rutrum.

Nullam pellentesque metus ac nisi pulvinar, eget varius nunc dapibus. Sed turpis sem, rutrum fermentum consequat vel, interdum id ex. Duis mollis ligula ac posuere lobortis. Quisque vestibulum justo ac urna mollis, at suscipit nisi ultrices. Proin iaculis est sit amet dapibus faucibus. Proin faucibus, diam non vulputate maximus, justo ex tristique nunc, in mollis augue enim in lorem. Mauris varius, lorem at efficitur malesuada, neque enim pulvinar arcu, aliquet imperdiet libero libero fringilla risus. Ut et eros ultricies, blandit magna in, facilisis urna. Curabitur vehicula nisl ut sagittis ultrices. Nulla vestibulum odio et posuere suscipit.

Etiam ac ipsum a purus elementum tincidunt a sit amet mi. Ut eleifend mauris at lorem euismod vehicula. Fusce aliquam feugiat eros, at volutpat sem tristique at. Curabitur risus magna, laoreet in lectus eu, tristique porta nisi. Vivamus nulla nulla, consequat sed iaculis nec, mattis eget libero. Sed facilisis consectetur nisl sit amet ornare. Nam scelerisque feugiat nisi at faucibus. In hac habitasse platea dictumst. Nullam sed semper urna.

Accordion

A1: Maecenas hendrerit

Maecenas hendrerit posuere feugiat. Suspendisse lorem ligula, fermentum vitae libero ac, fermentum pharetra sem. Nulla imperdiet condimentum leo, sed fringilla turpis porta et. Cras aliquam rutrum turpis. Donec in commodo metus. Ut sodales gravida lacus, vitae vulputate ex commodo sit amet. Morbi nulla urna, imperdiet sed est eleifend, blandit feugiat justo. Nam dapibus arcu vel condimentum lacinia. Etiam at lorem a est interdum imperdiet. Aliquam semper, magna eget dignissim luctus, leo sem vestibulum elit, non maximus diam sapien quis sapien. Donec at tortor eu neque tempus molestie in nec magna. Nunc eu est non urna placerat volutpat eu eu nunc. Suspendisse euismod nunc ut augue ultrices, quis facilisis sapien facilisis.

In at posuere enim. Maecenas fermentum eros eu mollis iaculis. Mauris ac sem sit amet urna bibendum rhoncus. Pellentesque eget tempor orci, eu pretium sapien. Fusce et odio eu metus pulvinar ornare ut nec elit. In mattis, est eu sollicitudin cursus, nulla enim pulvinar nisl, vel finibus dui enim sit amet elit. Integer in scelerisque enim, non convallis lorem. Nulla quis lorem at quam condimentum gravida. Donec varius nibh eu mi vestibulum rutrum.

A1: Nullam pellentesque

Nullam pellentesque metus ac nisi pulvinar, eget varius nunc dapibus. Sed turpis sem, rutrum fermentum consequat vel, interdum id ex. Duis mollis ligula ac posuere lobortis. Quisque vestibulum justo ac urna mollis, at suscipit nisi ultrices. Proin iaculis est sit amet dapibus faucibus. Proin faucibus, diam non vulputate maximus, justo ex tristique nunc, in mollis augue enim in lorem. Mauris varius, lorem at efficitur malesuada, neque enim pulvinar arcu, aliquet imperdiet libero libero fringilla risus. Ut et eros ultricies, blandit magna in, facilisis urna. Curabitur vehicula nisl ut sagittis ultrices. Nulla vestibulum odio et posuere suscipit.

Etiam ac ipsum a purus elementum tincidunt a sit amet mi. Ut eleifend mauris at lorem euismod vehicula. Fusce aliquam feugiat eros, at volutpat sem tristique at. Curabitur risus magna, laoreet in lectus eu, tristique porta nisi. Vivamus nulla nulla, consequat sed iaculis nec, mattis eget libero. Sed facilisis consectetur nisl sit amet ornare. Nam scelerisque feugiat nisi at faucibus. In hac habitasse platea dictumst. Nullam sed semper urna.

A1: Something Else
With a new line in the header

Something in English, for a change