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; }
If you want to recieve the latest WordPress snippets, tutorials, tricks and useful information about web development, seo, social media marketing, google you can Subscribe to our newsletter. All you need to do is to fill the Subscribe form below, verify your Free Subscription in your email and start read our daily useful tips and tricks straight in your mailbox.
Note* we hate spam and our newsletter is powered by Google Feedburner and you will not get spam messages in your mailbox.
Leave a Reply