Do you want to engage your web visitors with interactive elements that spark curiosity and inform them? Look no further than content toggles! Content toggle is a versatile switch that lets users control what they see, offering a dynamic way to present information and keep them engaged.
Whether you’re showcasing pricing plans, revealing features of products and services, adding a touch of fun to your FAQs, or making before-and-after comparisons, Divi offers two ways to create stunning content toggles, both with and without plugins.
This tutorial will cover the process of adding content toggles in Divi without the need for any plugins. However, we have a separate article covering how to create a content tooggle in Divi with a plugin in case prefer the easier method.


Steps to Create Content Toggle in Divi (without Plugin)
Step 1: Create the Content
Add Two Sections of Toggle Content
First, you need to create or add the content. The content must have two sections that will be shown for each state of the toggle switch.
Go to the Divi Builder editor, then start creating or adding your preferred toggle content.
For this example, we create a content toggle for the restaurant menu. The first section is for “Popular Dishes,” and “Chef’s Special” is for the second section.

Add the CSS Class
Next, we will add the CSS class(es) for each section you’ve just created.
- First Section
Please add the CSS class wpp_toggle__content_1
(Section Settings > Advanced tab > CSS ID & Classes > CSS Class).

- Second Section
Moving to the second section, add this CSS class wpp_toggle__content_2 wpp_toggle__inactive
to the CSS Class input field.

Step 2: Create the Toggle
Now, it’s time to add the toggle switcher to the page.
Add a new section, then insert the Code Module inside the row. Commonly, the toggle switcher is located above the content, so make sure to place it above the first section.
Afterward, please copy the combination code snippet (HTML, CSS, and JavaScript) below and paste it into the available field.
<div class="ds_toggle__switch_wrapper"> <div class="ds_toggle__switch_wrapper_inner"> <div class="ds_toggle__label ds_toggle__label_primary"> <b>Popular Dishes</b> </div> <div class="ds_toggle__switch"> <input type="checkbox" name="ds_toggle" id="ds_toggle" class="ds_toggle__switch_checkbox"> <label for="ds_toggle"></label> </div> <div class="ds_toggle__label ds_toggle__label_secondary"> <b>Chef's Special</b> </div> </div> </div> <style> /* toggle background colors */ .ds_toggle__switch > input:checked + label { background : #00ff44; } .ds_toggle__switch label { background : #6a39e4; } /* toggle switch color */ .ds_toggle__switch label::after { background : #ffffff; } .ds_toggle__switch_wrapper { display : -webkit-box; display : -ms-flexbox; display : flex; align-items : center; justify-content : center; margin-bottom : 20px; } .ds_toggle__switch_wrapper_inner { display : -webkit-box; display : -ms-flexbox; display : flex; align-items : center; } .ds_toggle__switch { position : relative; display : inline-block; vertical-align : middle; margin : 0 30px; cursor : pointer; } .ds_toggle__switch input[type="checkbox"] { position : relative; width : 100%; height : 100%; padding : 0; margin : 0; opacity : 0; z-index : 3; display : none; -webkit-appearance : none; } .ds_toggle__label { line-height : 1.7em; } .ds_toggle__switch { width : 50px; height : 30px; } .ds_toggle__switch label { cursor : pointer; top : 0; left : 0; right : 0; bottom : 0; width : 100%; height : 100%; position : absolute; -webkit-transition : all 0.3s ease; -o-transition : all 0.3s ease; transition : all 0.3s ease; border-radius : 20px; } .ds_toggle__switch label::after { position : absolute; -webkit-transition : all 0.3s ease; -o-transition : all 0.3s ease; transition : all 0.3s ease; top : 50%; -webkit-transform : translateY(-50%); transform : translateY(-50%); content : ""; height : 20px; width : 20px; left : 5px; bottom : 5px; border-width : 0; border-radius : 50%; } .ds_toggle__switch > input:checked + label::after { -webkit-transform : translate(20px, -50%); transform : translate(20px, -50%); } .wpp_toggle__inactive { display: none !important; } </style> <script> jQuery(document).ready(function ($) { $(document.body).on('change', '.ds_toggle__switch_checkbox', function() { var isChecked = $(this).prop('checked'); $('.wpp_toggle__content_1').toggleClass('wpp_toggle__inactive', isChecked); $('.wpp_toggle__content_2').toggleClass('wpp_toggle__inactive', !isChecked); }) }) </script>


To change and style up the toggle labels, you can replace them in the combination snippet (lines 4th and 11th).

The Bottom Line
While the plugin offers a convenient solution for content toggles in Divi, mastering the built-in features unlocks a more customizable and cost-effective approach.
This tutorial has equipped you with the knowledge and techniques to create stunning and functional content toggles without relying on additional plugins.
Remember, with some code and creative skills, you can craft unique content interactions that enhance your website and engage your visitors in innovative ways. So, go forth and toggle with confidence; play around with the combination code, and continue exploring and pushing the boundaries of Divi’s potential!