Show/display More Content jQuery

Set your custom number of li/blocks/rows to show/display and remaining will be hide. And set number of li/blocks/rows to to display after clicking on Show More button.

by Aqeel Malik

HTML

<!--
Name  : Aqeel Malik (Web Developer)
Email : [email protected]
Mobile: +92 302 6262164
Skills: xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | PHP-MySQL | Photoshop | Firework | Dreamweaver
-->
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<li>10</li>
	<li>11</li>
	<li>12</li>
	<li>13</li>
	<li>14</li>
	<li>15</li>
	<li>16</li>
	<li>17</li>
</ul>

CSS

/*
Name  : Aqeel Malik (Web Developer)
Email : [email protected]
Mobile: +92 302 6262164
Skills: xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | PHP-MySQL | Photoshop | Firework | Dreamweaver
*/
a {
    cursor: pointer;
    background: #eee;
}

JavaScript

/*
Name  : Aqeel Malik (Web Developer)
Email : [email protected]
Mobile: +92 302 6262164
Skills: xHTML | HTML5 | CSS3 | Bootstrap | Wordpress | Javascript | jQuery | Ajax | PHP-MySQL | Photoshop | Firework | Dreamweaver
*/
var numShown = 5; // Initial rows shown & index
var numMore = 5;  // Increment

var ul = $('ul');  // ul containing all the rows
var rows = ul.find('li').length; // Total # rows

$(function () {
    // Hide rows and add clickable text
    ul.find('li:gt(' + (numShown - 1) + ')').hide().end()
        .after('<a id="more">Show <span>' + numMore + '</span> More</a>');

    $('#more').click(function() {
        numShown = numShown + numMore;
        // no more "show more" if done
        if (numShown >= rows) {
            $('#more').remove();
        }
        // change rows remaining if less than increment
        if (rows - numShown < numMore) {
            $('#more span').html(rows - numShown);
        }
        ul.find('li:lt(' + numShown + ')').show();
    });

});