Change Toggle “close-open” text in 7 Simple Steps in Divi

Change Toogle close open text in Divi
Change Toogle close-open text in Divi

Change Toggle “close-open” text in 7 Simple Steps – Divi Theme using jQuery

If you’ve read some of my articles until now, you know that I use Divi as the main tool to build quick websites and help small and medium-sized businesses grow their online presence. Divi, a powerful WordPress theme, offers a variety of customization options.

In this article, I will share the process of changing a toggle when it is opened or closed in the Divi theme using JavaScript. By leveraging the power of JavaScript, you can add dynamic behavior to your toggles and enhance the user experience on your website.


So, to change toggle “close-open” text in Divi here are 7 simple steps. So let’s get our hands dirty.

Step 1: Access the Divi Builder Log in to your WordPress dashboard and navigate to the page where you want to make the changes. Click on “Edit with Divi Builder” to access the Divi Builder interface.

Step 2: Add a Toggle Module In the Divi Builder, add a Toggle module to your desired section by clicking on the plus icon. This will insert the toggle module into your layout.

Step 3: Customize the Toggle Content After adding the Toggle module, customize its content by adding text, images, or any other content you want to display when the toggle is opened.

Step 4: Assign a CSS Class To target the toggle with JavaScript, assign a unique CSS class to the Toggle module. In the module settings, navigate to the Advanced tab and enter a custom CSS class name in the CSS Class field. Remember to make a note of the class name for later use. It is what I do as I tend to forget.

The Divi theme usually includes jQuery by default, so you shouldn’t have to worry about that.

Step 5: Add Custom JavaScript (jQuery) Code To change the toggle when it is opened or closed, add the following jQuery code to your theme:

(function($) {
   $(document).ready(function() {
      $('.your-css-class').on('click', function() {
         $(this).toggleClass('opened');
      });
   });
})(jQuery);

Replace ‘your-css-class’ with the CSS class you assigned to the Toggle module in Step 4. The code adds a click event listener to the toggle, toggling the ‘opened’ class whenever it is clicked.

Step 5 : Publish and Test Click the “Publish” button to save your modifications. Preview the page and test the toggle by clicking on it. You should observe that the ‘opened’ class is added or removed, changing the appearance or behavior of the toggle.

Bonus: Make global change to toggle texts when are opened or closed. To change the text when a toggle is opened or closed in the Divi theme, you should do the following:

  • Open your WordPress admin panel and navigate to the Divi theme options.
  • In the “Divi > Theme Options” page, scroll down to the “Integration” tab.
  • In the “Add code to the <head> of your blog” section, add the following code:
<script>
  jQuery(document).ready(function($) {
    $('.et_pb_toggle_title').click(function() {
      var $toggle = $(this).closest('.et_pb_toggle');
      var $content = $toggle.find('.et_pb_toggle_content');

      if ($toggle.hasClass('et_pb_toggle_open')) {
        $(this).html('More Info');
      } else {
        $(this).html('Less Info');
      }
    });
  });
</script>

The result will be as follows:

Toggle opened shows -INFO and closed shows +INFO

Short Recap:

  • customize the toggle content
  • assign a CSS class
  • and add the necessary jQuery code

By incorporating this jQuery code into your Divi theme, you can dynamically change the appearance or behavior of toggles when they are opened or closed. The seven simple steps outlined in this article provide a straightforward approach to implement this functionality.

If you are interested in more information of the toggle in Divi, you could always reach out to their documentation, here.
You want to know more about JavaScript? Maybe this article will be useful.

Luc

, , , , , ,