Search

How to Create Content Toggle in Divi (without Plugin)

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!

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

Leave a Comment

Save your Divi assets to the cloud and access them from anywhere.