Adding show more show less button

Question

In my website to avoid complexity I trying to add show more and less more option using jQuery. but it doesn't work.

Here I trying to show 1st 10 lists.

After click show more, existing list should be shown

 //this will execute on page load(to be more specific when document ready event occurs) if ($('.ty-compact-list').length > 10) { $('.ty-compact-list:gt(2)').hide(); $('.show-more').show(); } $('.show-more').on('click', function() { //toggle elements with class .ty-compact-list that their index is bigger than 2 $('.ty-compact-list:gt(2)').toggle(); //change text of show more element just for demonstration purposes to this demo $(this).text() === 'Show more' ? $(this).text('Show less') : $(this).text('Show more'); }); 

 .ty-compact-list { float: left; } .show-more { display: none; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container menuitem wrapper"> <div class="filterDiv ty-compact-list soup"><img class="img1" src="images/a1.jpg"> <h2 class="head2">onion soup</h2> <h3 class="head3">$200</h3> <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div> <div class="filterDiv ty-compact-list indo"><img class="img1" src="images/a1.jpg" style="float: left"> <h2 class="head2">onion soup</h2> <h3 class="head3">$200</h3> <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div> <div class="filterDiv ty-compact-list soup"><img class="img1" src="images/a1.jpg" style="float: left"> <h2 class="head2">onion soup</h2> <h3 class="head3">$200</h3> <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div> <div class="filterDiv ty-compact-list devil"><img class="img1" src="images/a1.jpg" style="float: left"> <h2 class="head2">onion soup</h2> <h3 class="head3">$200</h3> <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div> <div class="filterDiv ty-compact-list platter"><img class="img1" src="images/a1.jpg" style="float: left"> <h2 class="head2">onion soup</h2> <h3 class="head3">$200</h3> <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div> <div class="filterDiv ty-compact-list devil"><img class="img1" src="images/a1.jpg" style="float: left"> <h2 class="head2">onion soup</h2> <h3 class="head3">$200</h3> <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div> <div class="filterDiv ty-compact-list starter"><img class="img1" src="images/a1.jpg" style="float: left"> <h2 class="head2">onion soup</h2> <h3 class="head3">$200</h3> <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div> <div class="filterDiv ty-compact-list starter"><img class="img1" src="images/a1.jpg" style="float: left"> <h2 class="head2">onion soup</h2> <h3 class="head3">$200</h3> <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div> <div class="filterDiv ty-compact-list fry"><img class="img1" src="images/a1.jpg" style="float: left"> <h2 class="head2">onion soup</h2> <h3 class="head3">$200</h3> <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div> <div class="filterDiv ty-compact-list d&i"><img class="img1" src="images/a1.jpg" style="float: left"> <h2 class="head2">onion soup</h2> <h3 class="head3">$200</h3> <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div> <div class="filterDiv ty-compact-list fry"><img class="img1" src="images/a1.jpg" style="float: left"> <h2 class="head2">onion soup</h2> <h3 class="head3">$200</h3> <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div> <div class="filterDiv ty-compact-list fry"><img class="img1" src="images/a1.jpg" style="float: left"> <h2 class="head2">onion soup</h2> <h3 class="head3">$200</h3> <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div> <div class="show-more">Show more</div> </div> 

Answer 1

Your code have some problems.

1- $('.show-more').css("display", "block");

2- $(this).text($(this).text() === 'Show more' ? 'Show less' : 'Show more');

3- Remove display: none; from css.

 if ($('.ty-compact-list').length > 3) { $('.ty-compact-list:gt(2)').hide(); $('.show-more').css("display", "block"); } $('.show-more').on('click', function() { //toggle elements with class .ty-compact-list that their index is bigger than 2 $('.ty-compact-list:gt(2)').toggle(); //change text of show more element just for demonstration purposes to this demo $(this).text($(this).text() === 'Show more' ? 'Show less' : 'Show more'); }); 

 .ty-compact-list { float: left; } .show-more { cursor: pointer; } .filterDiv { float: left; background-color: #ffffff; width: 450px; text-align: center; margin: 6px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 20px; border: 2.5px solid #0f2f16; min-height: 300px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container menuitem wrapper"> <div class="filterDiv ty-compact-list soup"><img class="img1" src="images/a1.jpg"> <h2 class="head2">onion soup</h2> <h3 class="head3">$200</h3> <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div> <div class="filterDiv ty-compact-list indo"><img class="img1" src="images/a1.jpg" style="float: left"> <h2 class="head2">onion soup</h2> <h3 class="head3">$200</h3> <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div> <div class="filterDiv ty-compact-list soup"><img class="img1" src="images/a1.jpg" style="float: left"> <h2 class="head2">onion soup</h2> <h3 class="head3">$200</h3> <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div> <div class="filterDiv ty-compact-list devil"><img class="img1" src="images/a1.jpg" style="float: left"> <h2 class="head2">onion soup</h2> <h3 class="head3">$200</h3> <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div> <div class="filterDiv ty-compact-list platter"><img class="img1" src="images/a1.jpg" style="float: left"> <h2 class="head2">onion soup</h2> <h3 class="head3">$200</h3> <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div> <div class="filterDiv ty-compact-list devil"><img class="img1" src="images/a1.jpg" style="float: left"> <h2 class="head2">onion soup</h2> <h3 class="head3">$200</h3> <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div> <div class="filterDiv ty-compact-list starter"><img class="img1" src="images/a1.jpg" style="float: left"> <h2 class="head2">onion soup</h2> <h3 class="head3">$200</h3> <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div> <div class="filterDiv ty-compact-list starter"><img class="img1" src="images/a1.jpg" style="float: left"> <h2 class="head2">onion soup</h2> <h3 class="head3">$200</h3> <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div> <div class="filterDiv ty-compact-list fry"><img class="img1" src="images/a1.jpg" style="float: left"> <h2 class="head2">onion soup</h2> <h3 class="head3">$200</h3> <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div> <div class="filterDiv ty-compact-list d&i"><img class="img1" src="images/a1.jpg" style="float: left"> <h2 class="head2">onion soup</h2> <h3 class="head3">$200</h3> <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div> <div class="filterDiv ty-compact-list fry"><img class="img1" src="images/a1.jpg" style="float: left"> <h2 class="head2">onion soup</h2> <h3 class="head3">$200</h3> <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div> <div class="filterDiv ty-compact-list fry"><img class="img1" src="images/a1.jpg" style="float: left"> <h2 class="head2">onion soup</h2> <h3 class="head3">$200</h3> <p>(Traditional soup prepared with tamarind juice, pepper corn and selected spice)</p>></div> <div class="show-more">Show more</div> </div>