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