Module 18 of 71

Divi Content Toggle that flips between two views.

One switch, two blocks of content. Perfect for monthly and yearly pricing, or showing two audiences on one page.

Get Divi Supreme Pro Open the playground

Monthly

Yearly

Choose the two plans layouts. Import the Divi Library file, then open this Content Toggle and pick Module demo · Content Toggle · Hero · Monthly plans for Content One and Module demo · Content Toggle · Hero · Yearly plans for Content Two.

What is the Divi Content Toggle module?

Content Toggle is a Divi 5 module in Divi Supreme Pro that shows a switch between two headings. Flip the switch and the content below changes from one block to the other.

Each side can be custom content, a saved Divi Library layout or a shortcode, so you can toggle whole pricing tables, forms or sections. Style the switch size, colours and alignment, and choose which side shows first.

content sides

content types

max switch size

custom code

Start from a Content Toggle recipe.

The recipes and the playground run on the front end. Use Preview, or open the page, to try them.

Try every Content Toggle setting.

The recipes and the playground run on the front end. Use Preview, or open the page, to try them.

Everything Content Toggle can do.

Updated 14 Oct 2026 in v5.0.83

One switch, two sides

Two headings with a switch between them. Click either heading or the switch.

Library layouts

Show any saved Divi Library layout on either side, like a full pricing table.

Text or shortcodes

Use custom content, or the output of any shortcode.

Style the switch

Size, primary, secondary and inner colours, and alignment.

Choose the first view

Set which side is active when the page loads.

Divi 5 native, WPML ready

Separate heading styles and content backgrounds, translatable with WPML.

Content Toggle documentation

Setup for Divi 5: headings, content types, active side and switch styling.

Read the guide

Need help? Contact support

Questions about Content Toggle.

What is Content Toggle for?

Switching between two versions of content in the same spot. Monthly and yearly pricing is the classic use, but it also works for two audiences, two products or before and after.

What can each side show?

Custom Content, a saved Divi Library layout, or a shortcode. Library layouts let you toggle whole sections, such as a pricing table.

Which side shows first?

Set Select Active Switcher to Switcher One or Switcher Two.

Can I style the switch?

Yes. Set the Switcher Size, the Primary and Secondary backgrounds for each state, the Inner (knob) colour and the alignment.

Can I style the two headings differently?

Yes. Heading One and Heading Two each have their own font settings, and each content side has its own background and top spacing.

Is it keyboard accessible?

Yes. The switch can be reached with Tab and toggled with Enter or Space.

Does Content Toggle work with Divi 5 and WPML?

Yes. It is a native Divi 5 module and its headings and content can be translated with WPML.

Next module, A to Z

Dark Mode Toggle Module

Related modules

Advanced Tabs Module

Tabs that hold whole layouts.