How to add tabs and accordions to a WordPress site

Use tabs when visitors need to switch between related categories, such as specifications, services, or product information. Use an accordion when visitors may want to open several answers, such as FAQs or troubleshooting steps.

Keep important introductory information outside the collapsed areas. On mobile, a long row of tabs may wrap awkwardly, so check whether an accordion layout would be easier to use.

Open the page or post in the Block Editor and select the plus button. Search for Tabs or Accordion, then insert the block where the content should appear. WordPress 7.1 and later provide native Tabs and Accordion blocks; older installations may provide the single-section Details block instead.

Add or remove items from the block, then enter a short label or heading for each one. Accordion settings can usually control whether multiple items may stay open and which item opens initially.

Write labels that describe the content without making visitors guess. Add headings, paragraphs, lists, images, buttons, or other suitable blocks inside each panel rather than putting links or buttons inside an accordion heading.

Keep each panel focused. If one tab contains several unrelated topics, split it into separate tabs or use headings inside the panel so the page remains scannable.

A basic accordion does not require a plugin. Use the native Accordion or Details block, or add a <details> element through an HTML block if your editor supports it. This gives you simple show-and-hide behaviour with little extra code.

Tabs are more complicated without a suitable block or widget. A custom version needs correctly connected tab buttons, panels, keyboard behaviour, focus handling, responsive styling, and usually JavaScript. It can work, but a copied snippet often breaks after a theme change or becomes difficult to use with a keyboard or screen reader.

Use the block, widget, or theme styling controls to set colours, spacing, borders, typography, active states, and icons. Avoid relying on colour alone to show which tab is selected, and keep labels short enough to wrap cleanly.

Preview the page on a phone and reduce the number of tabs if the tab row becomes crowded. Also check that opened accordion content is not hidden behind a sticky header or clipped by a fixed-height container.

Open the published page in a private browser window and test every tab and accordion item. Use a keyboard to move through the controls, confirm that the active state is visible, and check that links, forms, images, and buttons inside panels still work.

If the content disappears after caching or a theme update, clear the site and browser cache before troubleshooting further. A JavaScript optimisation setting can also interfere with custom tab widgets, so test with script delay or combination features temporarily disabled.

For a faster setup with more layout control, use JetTabs. It provides Elementor-friendly tabs and accordions with drag-and-drop styling, responsive layouts, animation options, icons, and shortcode support, so you can build the sections without writing the interaction code yourself.

Install the plugin from the WordPress dashboard, activate it, create the tab or accordion items, and place the resulting widget or shortcode on the page. This is the practical choice when you need vertical tabs, reusable layouts, or several styled components across a site.