Changing Button Text On Click in Divi

Written by Paul Massell

August 3, 2020

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

You May Also Like…

0 Comments

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.