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.
Create the button and give it an ID of “toggleButton” and set it to run the function “toggleHostingPlans” which we’ll write below.
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.
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