Discover how to use jQuery to create a "Read More/Less" button. -

You may have come across posts where certain content is hidden and only revealed after pressing a button. This hiding and revealing technique is quite flexible and can serve multiple purposes. For instance, It can be used to present a long text followed by some impactful content that needs to be shown. Similarly, on mobile devices, it can help avoid lengthy texts. Content truncation is also another use for which it can be employed, whereby only a portion of the content is displayed, and to access the remaining part, a subscription is required. However, this last use may not be desirable for some.

Today I’ll show you two different situations.

The basic style .scss

//this class wrapper the full content
.content-hidden {
    height: 400px; //you define the height you want
    overflow: hidden;
    position: relative;
    
    //when the button is active
    }
    &.active {
        height: auto; 
      }
    
    //slyle default for the button 
    .btn-show-hidden {
        transform: translateY(-20px);
        padding: 6px 12px;
        width: 120px; //optional
        display: block;
        margin: 0 auto;
        //optional
        border-radius: 8px;
        background: #FFF;
        color: green;
        
    }
}

.mask-hidden-vertical {
    height: 150px;
    width: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgb(250, 250, 250);
    background: -moz-linear-gradient(180deg, rgba(250, 250, 250, 0) 0%, rgba(250, 250, 250, 1) 75%);
    background: -webkit-linear-gradient(180deg, rgba(250, 250, 250, 0) 0%, rgba(250, 250, 250, 1) 75%);
    background: linear-gradient(180deg, rgba(250, 250, 250, 0) 0%, rgba(250, 250, 250, 1) 75%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff", GradientType=1);
    pointer-events: none;
}

HTML

            <!--Content-->
            <div class=" content-hidden">
              <!--Title-->
              <h2 class="h1 mb-4 green-3">
                Lorem Ipsum
              </h2>
  
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, quisquam molestias deserunt
                delectus sit repudiandae. Voluptatibus esse asperiores, voluptatum eius nostrum eum dolorum non commodi
                itaque velit placeat eaque nobis!</p>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, quisquam molestias deserunt
                delectus sit repudiandae. Voluptatibus esse asperiores, voluptatum eius nostrum eum dolorum non commodi
                itaque velit placeat eaque nobis!</p>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, quisquam molestias deserunt
                delectus sit repudiandae. Voluptatibus esse asperiores, voluptatum eius nostrum eum dolorum non commodi
                itaque velit placeat eaque nobis!</p>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, quisquam molestias deserunt
                delectus sit repudiandae. Voluptatibus esse asperiores, voluptatum eius nostrum eum dolorum non commodi
                itaque velit placeat eaque nobis!</p>

              <div class="mask-hidden-vertical"></div>
            </div>

            <a href="#" class="btn-show-hidden btn btn-outline-primary">
              Read more
            </a>

The jquery

When only a single “read more” button is available, clicking it should display all content and replace the text with “read less”.

jQuery(function ($) {
$(".btn-show-hidden").on("click", function (e) {
    e.preventDefault(); //prevent jump when using the tag <a/>
    $(this).toggleClass("active");
    $(".content-hidden").toggleClass("active");
+
    if ($(".btn-show-hidden").hasClass("active")) {
       $(this).text("Read less");
    } else {
       $(this).text("Read more");
    }
  });
}

If there are multiple “read more” on a webpage, it is important to ensure that clicking on one button does not affect the other buttons or their associated page content. Here the trick is to use .siblings.

The siblings() method returns all sibling elements of the selected element. Sibling elements are elements that share the same parent.

jQuery(function ($) {
  //Read More Content
  $(".btn-show-hidden").on("click", function (e) {
    e.preventDefault(); //prevent jump when using the tag <a/>
    $(this).toggleClass('active');
    $(this).siblings(".content-hidden").toggleClass("active");
  
    if ($(this).siblings(".content-hidden").hasClass("active")) {
      $(this).text("read less"); //here I've removed the too
    } else {
      $(this).text("read more");
    }
}

I trust you have found this post enjoyable. My solution for this scenario employs Jquery, while the principles remain applicable for those using Vanilla js, Vue or React.

HTML

The jquery

Trending now