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

---

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; }