Changing Button Text On Click in Divi

Tutorials | Web Design / Development

Written by Paul Massell
Aug 3, 2020

Introduction

We’re using WordPress and the Divi theme on this website, but you should be able to accomplish this on most sites using just a couple of lines of HTML and JavaScript (and some CSS to make it look nice).

In this quick tutorial I’ll show you how to change the text of your button after you click the button. This is useful when you want to toggle back and forth between to pieces of content. On my website I’m using it to toggle between annual vs monthly hosting plans. Click the button below to see an example.

 

This tutorial is just for changing the text of the button, if you want to actually hide/show content with a button click here for that tutorial.

The first thing you need to do is create the button. I won’t be using the default button module in Divi because in this case it’s faster to just make our own with HTML.

HTML

Create the button and give it an ID of “toggleButton” and set it to run the function “toggleHostingPlans” which we’ll write below.

 

CSS

Here’s the styling I used. I like to add box shadow because it makes the button stand out more. The “-webkit-“ and “-moz-“ are there to ensure that the shadow shows on Chrome and Firefox browsers. At the bottom you can see that I’ve set it to reduce the opacity on hover, just to make the button a little more interactive.

 

JavaScript

Now all you have to do is set it to check what the text says, and then change it to what you want it to say. And since we already added this function to our button, it will run whenever the button is clicked.

Here’s a live demo using custom text

 

and here’s the JS for the demo, so you can see exactly what to change

Related

Quick and Creative Image Borders with Divi

Quick and Creative Image Borders with Divi

Creating a border for your image through Divi is super easy - there’s a button for it under the design tab of your image module. Unfortunately, you are not able to get too creative yet with your border choices with just the border button. Therefore, we have listed...

Thank You Notes: The Ultimate Guide

Thank You Notes: The Ultimate Guide

A wonderful way to show clients that you are grateful for their partnership is to send handwritten thank you notes in the mail.  The good news is that since letter writing is a dying art, this gesture will be unexpected and much appreciated. This is why we believe...

Adding a Text Overlay to an Image on Hover

Adding a Text Overlay to an Image on Hover

Background Adding a text overlay to images in WordPress can seem intimidating at first, especially if you have minimal experience building a website. Luckily, there is a quick and simple way to get this task achieved using Divi, a theme for Wordpress. The Divi Builder...

2 Comments

  1. Chad

    Hello, thank you for the helpful article!
    Do you know how to get the onclick functionality within a divi button module? I currently have 3 buttons on a divi site that reveal sections but would like to incorporate the if/else JS into it so the text can change whenever the sections are expanded and collapsed.

    Here is an example:
    jQuery(document).ready(function() {
    jQuery(‘#reveal_1’).hide();
    jQuery(‘.rv_button_1’).click(function(e){
    e.preventDefault();jQuery(“#reveal_1”).slideToggle();
    jQuery(‘.rv_button_1’).toggleClass(‘opened closed’);
    jQuery(“#reveal_2”).hide();
    jQuery(“#reveal_3”).hide();

    Regards, Chad

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.