How to Add a Button to Reveal More Text in Divi

by Jul 23, 2021Tutorials

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

1

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:

  1. Go to Divi → Theme Options → Integration
  2. Add the following JS code to < body > section
h

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>
2

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

  1. Go to Divi → Theme Options → General
  2. Add the following code to the Custom CSS field
  3. Click Save Changes
h

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>

  1. In any Divi module Text toggle switch to Text editor
  2. Add the following HTML to the Text field
h

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 Ekstedt

Maciej is the co-founder of Divi Pixel. He is a self-made web designer and marketing expert, and he loves his job so much that he barely leaves the office. He transforms creative ideas into effective strategies for his company. Maciej is fascinated by the phenomenon of a megalopolis. He notices patterns and details which make up the whole thing, and he uses these skills in his work.