Show more show less list or item with html jQuery
- Post by: Public
- on: 08-12-20
For show more item list and show less item list First we need to design a html view such as blew coding
<div class="item-wrapper"> <div class="item-list">Product 1</div> <div class="item-list">Product 2</div> <div class="item-list">Product 3</div> <div class="item-list">Product 4</div> <div class="item-list">Product 5</div> <div class="item-list">Product 6</div> <div class="show-more">Show more</div> </div>
Then we need write some css code
.item-list { padding: 5px 5px 5px 0px; float: left; width: 100%; } .show-more { display: none; cursor: pointer; }
and finally we need to add this jquery in your project footer body tag
if ($('.item-list').length > 3) { $('.item-list:gt(2)').hide(); $('.show-more').show(); } $('.show-more').on('click', function() { //toggle elements with class .item-list that their index is bigger than 2 $('.item-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'); });
Thanks
Comments