Snippets library

Browse Snippets
Claim your Free Profile
Add Snippet
Home / Widgets / Read More/Less Toggle with Fade Effect
Duplicate Snippet

Embed Snippet on Your Site

Read More/Less Toggle with Fade Effect

Original code: Imran Siddiq, (Web Squadron on YouTube)

Modified to add fade effect.

Description:
This code implements a text truncation feature perfect for long content descriptions. It adds a "Read More/Less" toggle button that, when clicked, smoothly expands or collapses the text. The modification includes a gradient fade effect for the last few lines of truncated text, providing a more polished user experience. This solution is particularly useful for Elementor text widgets where you need to make long descriptions more manageable without compromising readability.

Key Features:
- Smooth expand/collapse transition
- Gradient fade effect for truncated text
- Compatible with Elementor text widgets
- Clean, responsive design
- Easy to implement

Olutobi Praise
<10
Code Preview
Comments
php
<?php
<div id="post-content">
  <div id="long_content">
    <!-- Your content goes here -->
  </div>
  <div id="read-more-btn" onclick="toggleReadMore()">Read More ></div>
</div>
<style>
  /* NEW: Added this */
  #post-content {
    position: relative;
  }
  #long_content {
    max-height: 100px;
    overflow: hidden;
    transition: max-height 0.5s ease;
    /* NEW: Added this */
    position: relative;
  }
  /* NEW: Added this entire block for fade effect */
  #long_content:not(.full)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: linear-gradient(transparent, white); /* Change 'white' to match your background color */
    pointer-events: none;
  }
  #long_content.full {
    max-height: none;
  }
  /* NEW: Added this to remove fade when expanded */
  #long_content.full::after {
    display: none;
  }
  #read-more-btn {
    display: inline-block;
    margin-top: 10px;
    cursor: pointer;
    color: #0073e6;
    font-weight: bold;
  }
</style>
<script>
  function toggleReadMore() {
    var content = document.getElementById('long_content');
    var btn = document.getElementById('read-more-btn');
    if (content.classList.contains('full')) {
      content.classList.remove('full');
      btn.innerHTML = 'Read More >';
    } else {
      content.classList.add('full');
      btn.innerHTML = 'Show Less';
    }
  }
</script>
Hosted with ❤️ by WPCode
1-click Use in WordPress

Comments

Add a Comment

Login to Deploy Snippet