WP Snipp Ninja

How to create jQuery driven “Read More” button for displaying large content blocks?

Author: Dimitar Radev | Posted on: July 22, 2018 |


Hiding long content sections is something that sometimes is necessary to make a design look a bit better instead of having a ton of text on your home or category page. Below you are the code that makes this possible. It creates a jQuery driven Show More button which pretty much shows the hidden content and “Hide” button to hide it back again.

Something important: In the jQuery script you can control the visible height percent from “var hidePercent”, just change it to what you see fit.

<div class="category-description">
   <-- Place the content here. the_content(); maybe? -->
   <div class="show-gradient"></div>
   <button class="show-content">Show More</button>
   <button class="hide-content">Less</button>
</div>
    $(window).load(function() {
      var hidePercent = 20; //This is the value you have to change if you want bigger or smaller vissible area
      var windowHeight = $(window).height();
      var vissibleHeight = (windowHeight/100)*hidePercent;
      console.log(vissibleHeight);
      var contentArea = $('.category-description');

      //hide extra content
      contentArea.height(vissibleHeight);

      //show on click
      $('.show-content').on('click', function () {
        contentArea.css('height', 'auto');
        $(this).hide();
        $('.hide-content').show();
      })

      //hide on click
      $('.hide-content').on('click', function () {
        contentArea.height(vissibleHeight);
        $(this).hide();
        $('.show-content').show();
      })
    });
.category-description {
  overflow: hidden;
  position:relative;
  padding-bottom: 40px;
}

.show-gradient {
  width: 100%;
  position: absolute;
  bottom: 0;
  content: ' ';
  height:80px;
  display:block;
  background: rgba(255,255,255,0);
  background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(254,254,254,1) 57%, rgba(254,254,254,1) 83%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(57%, rgba(254,254,254,1)), color-stop(83%, rgba(254,254,254,1)));
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(254,254,254,1) 57%, rgba(254,254,254,1) 83%);
  background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(254,254,254,1) 57%, rgba(254,254,254,1) 83%);
  background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(254,254,254,1) 57%, rgba(254,254,254,1) 83%);
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(254,254,254,1) 57%, rgba(254,254,254,1) 83%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fefefe', GradientType=0 );
}

.show-content,
.hide-content {
  position:absolute;
  bottom:0;
  width: auto;
  float: none;
  background: #019a0a;
  margin: 10px 0 10px -41px;
  text-align: center;
  padding: 7px 10px;
  font-size: 13px;
  border: 0;
  color: #fff;
  left: 50%;
}


.hide-content { display: none; }

About the Author

 Dimitar Radev

Hey, I'm Dimitar "B1-0S" Radev or D in short. I'm a WordPress Developer for nearly 10 years and I have in-depth knowledge in creating Custom WordPress Themes, Plugins, Commercial Themes Edits, and WooCommerce Storefronts. In the last two years, I'm specializing in Technical SEO for WordPress websites.


Follow Dimitar Radev on Social Media

Leave a Reply

Your email address will not be published. Required fields are marked *