Web Development & WordPress

How to Add View More / View Less Button in Elementor Text Editor (No Plugin Needed)

allaboutbasic

Sometimes you may have long text content in Elementor that you don’t want to show all at once. Showing too much text can negatively affect user experience and page readability.

A simple solution is to use a View More / View Less button that allows visitors to expand or collapse additional content when needed.

Here I have shared how to add a View More / View Less toggle in Elementor Text Editor using HTML, CSS, and a small PHP snippet—without installing any extra Elementor addons.

Step 1: Add HTML in Elementor Text Editor

Open Elementor → Text Editor widget → Code tab and paste the following 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

<div class="read-more-box">
   <span class="more-text">

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" by Cicero.

</span>
  <a href="javascript:void(0);" class="read-more-btn">View More</a>
</div>

Step 2: Add CSS (Custom CSS or Theme Customizer)

.read-more-box .more-text {
  display: none;
  margin-top: 20px;
}

.read-more-btn {
  display: inline-block;
  margin-top: 15px;
  color: #0073aa;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

Step 3: Add JavaScript Using Code Snippets Plugin

add_action('wp_head', function () {
    ?>
    <script>
    jQuery(document).ready(function($){
        $('.read-more-btn').on('click', function(){
            var $moreText = $(this).prev('.more-text');

            $moreText.slideToggle(300);
            console.log("click worked");

            $(this).text(function(i, text){
                return text === "View More" ? "View Less" : "View More";
            });
        });
    });
    </script>
    <?php
});

This script:

  • Toggles hidden text smoothly
  • Switches button text between View More and View Less
  • Works perfectly with Elementor

So you are done…. This is a lightweight, SEO-friendly, and developer-approved method to add a View More / View Less toggle in Elementor Text Editor. It’s perfect for WordPress users who want better UX without relying on third-party Elementor addons.

Leave a comment