How to Add a Button to Reveal More Text in Divi
In this tutorial, I will show you how to add a Read More button that will reveal hidden text after it’s clicked. Using this simple method will be useful for long paragraphs, where showing full text by default would break our design.
To avoid cluttering your website with too many pieces of information, you can hide some of it, allowing your visitors to choose whether to display the hidden information. Typically, the hidden text is displayed by clicking on a Read more link.
To create Read More / Read Less functionality we will use custom JavaScript and a bit of CSS that will hide additional text by default and customize button. You can follow this tutorial, or download ready-to-use section that can be imported to your Divi Library and used on your Divi website in no time.
Demo Preview
Add custom JS to Divi Theme Options
In this first step, we need to add custom JS to our website. This can be added to Divi Theme Options:
- Go to Divi → Theme Options → Integration
- Add the following JS code to < body > section
JS Code
<script>
document.querySelectorAll('.readMoreContent').forEach(function(item){
const dots = item.querySelector('.dots'),
moreText = item.querySelector('.more'),
btnText = item.querySelector('.read-more-btn');
btnText.onclick = function(){
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
})
</script>
Add Custom CSS
We will add 1 line of custom CSS that will hide our additional text by default in this step. This custom CSS can be added to Divi → Theme Options → Custom CSS
- Go to Divi → Theme Options → General
- Add the following code to the Custom CSS field
- Click Save Changes
CSS
/* Hide Additional Text */
.more {display: none;}
/* Customize Button */
.read-more-btn {
background-color: #000;
border-color: #000;
color: #fff;
padding: 5px 10px;
border-radius: 4px
}
How to use it on your Divi website
This functionality can be used on any Divi module that supports the Text field. You should only be aware that any HTML code must be added in Text mode, not Visual.
The code <span class=dots>…</span> will trunctuate our text.
All text that we want to be hidden by default must be wrapped in span class:
<span class=”more”>more text here</span>
- In any Divi module Text toggle switch to Text editor
- Add the following HTML to the Text field
HTML
<div class=”readMoreContent”>
Epic cheeseburgers come in all kinds of manifestations, but we want them in and around our mouth no matter what<span class=”dots”>…</span><span class=”more”>Slide those smashed patties with the gently carmelized meat fat between a toasted brioche bun and pass it over. You fall in love with the cheeseburger itself but the journey ain’t half bad either. They’re the childhood friend that knows your highest highs and lowest lows. They’ve been with you through thick and thin and they’re the best at keeping secrets. Whether it’s dressed up or informal, cheeseburgers have your back.</span>
<button class=”read-more-btn”>Read more</button>
</div>
This is it! We hope you enjoy reading this tutorial as well as the free section we are sharing with you. There are more cool tutorials to come, so please make sure to sign up for our newsletter. We are also running a Summer Sale, so if you haven’t purchased the Divi Pixel plugin yet, now it’s the right time. We are offering up to 30% off in our Summer Sale
Maciej Ekstedt
Maciej, co-founder of Divi Pixel, is a passionate web designer and marketing expert who thrives on turning creative ideas into effective strategies. His fascination with the intricacies of megalopolises influences his work, where he meticulously crafts detailed solutions for his company.
Enhance your Divi Theme with Custom Settings and New Modules. Start Creating Awesome Websites with the Divi Pixel
We offer a 14 Day Money Back Guarantee, so joining is Risk-Free!
I don’t see a closing tag anywhere. Shouldn’t there be one?
Hi
It doesn’t work…at all
Well… it works fine. I just checked. Please make sure you are following the tutorial step by step 🙂
I had problems implementing this, too, at first. However, after wasting a lot of time, I realized that copying the code and pasting didn’t work in the actual Divi module. There was a lot of corruption. Check all the text and punctuation in the Divi module to make sure it pasted correctly.The JS and CSS copied and pasted fine, but if you still have problems, check them. After fixing, it worked great. Styled it to how I wanted the button to look in the CSS. Thank you, Maciej Ekstedt, for posting this!
You need to change your ‘ to ” it doesn’t not work in your embedded javascript code
It runs perfect. Thank you, Maciej.
Hi. It runs perfectly BUT you need to fix your HTML code and replace all the ” for ” (there IS a tiny difference in HTML). Otherwise it’s not working (as happened for some people reading the comments). Thanks!!!
It works perfectly, if one replaces the quotation marks in the code with straight quotation marks. In my case the divi module added straight quotation marks after I inserted the code, but did not delete the original quotation marks. After I deleted them it worked perfect.