Want to give your users a quick and clean way to switch between different content or pricing options on your WordPress site? A toggle button is the perfect solution!
With a toggle button, visitors can instantly switch between two or more options—like monthly vs. yearly pricing, light vs. dark mode, or even completely different content sections—without cluttering your page.
In this post, you’ll discover two simple ways to add toggle buttons to your WordPress site:
- Method 1: Add a toggle button for any type of content (text, images, forms, etc.)
- Method 2: Add a toggle button for pricing tables or any type of tabular data
Let’s dive in!
Method 1: Add a Toggle Button for Any Type of Content
If you want to let your users switch between different blocks of content – like FAQs, product details, or different feature sets, this method is for you.
We’ll use the Ultimate Blocks plugin, which offers a versatile Content Toggle (Tabbed Content) block that works for all kinds of content.
Step 1: Install Ultimate Blocks Plugin
- Go to your WordPress dashboard.
- Navigate to Plugins > Add New.
- Search for “Ultimate Blocks” and install/activate it.
Step 2: Add the Tabbed Content Block
- Open a post or page in the WordPress editor.
- Type
/tabbed contentor use the + icon to add the Tabbed Content block.
The ‘Tabbed Content’ block will look like this –
Step 3: Customize the Block for Toggle Functionality
Select the block and choose the Pills style in the settings (this makes tabs look like buttons).
Center the alignment for a classic toggle look.
Click the + sign next to the first tab to add another tab. Add at least two tabs (e.g., “Monthly” and “Yearly” or “Details” and “Summary”). Rename the tabs to match your toggle options.
Use the Color Settings to set contrasting colors, so it’s clear which tab is active.
Step 4: Add Your Content
Click inside each tab to add your preferred content (text, images, lists, forms, or even other blocks).
Customize further if needed—change tab backgrounds, content colors, and more.
Step 5: Preview and Publish
- Use the Preview option to test the toggle.
- Once you’re happy, Publish or Update the page.
That’s it! You now have a flexible toggle button for any type of content on your WordPress site.
Method 2: Add a Toggle Button for Pricing Tables (and More)
Want to let users toggle between monthly and yearly pricing tables—or compare different data sets side by side? The Toggle for Tableberg block in the Tableberg plugin is designed just for that!
With Tableberg Pro’s Toggle block, you can organize any number of tables into neat, clickable tabs—perfect for pricing plans, product comparisons, multi-language tables, or any scenario where multiple tables make sense.
Step 1: Insert the ‘Toggle for Tableberg’ Block
- Open your post or page in the WordPress editor.
- Click the + (plus) icon and search for “Toggle for Tableberg.”
- Add the block to your page.
Step 2: Set Up and Customize Your Tabs
- By default, you’ll see three tabs labeled “Tab 1,” “Tab 2,” and “Tab 3.”
- Add or remove tabs as needed using the + or – icons.
- Rename each tab (for example, “Monthly,” “Yearly,” or “Basic Plan,” “Pro Plan”).
- Use the right-hand options panel to adjust tab titles, alignment, colors, and borders for a branded look.
Step 3: Add Your Tables
- Click on each tab to add a unique table inside.
- Build a new table from scratch, or insert a pre-built Tableberg table pattern.
- Each tab can hold a completely different table—great for feature comparisons, pricing tiers, data sets, and more.
Popular Use Cases
- Pricing Tables: Let users toggle between monthly and yearly prices, or between different plans.
- Data Comparisons: Show regional data, different product specs, or performance metrics in separate tabs.
- Educational Content: Organize lessons or course material for easier navigation.
- Multi-Language Tables: Display the same data in different languages for international visitors.
Step 4: Preview and Publish
- Preview your toggle tabs to make sure everything looks and works as expected.
- Publish or update your post/page when ready.
Here’s an example how toggle looks like for a pricing table.
Conclusion
Adding a toggle button to your WordPress site is a great way to improve navigation, save space, and give visitors instant access to the content they care about—whether it’s switching between pricing plans, viewing details, or comparing data.
- For any type of content, use Ultimate Blocks to create flexible toggles in seconds.
- For pricing tables and more advanced table layouts, try Tableberg Pro’s Toggle block for a seamless tabbed experience.
Try out these methods on your site and make your content more interactive and user-friendly. Have questions or need help? Let us know in the comments!
