CODEWITHSUNDEEP
javascriptjquery
SimplySavage
SimplySavage

Reputation: 63

Show more / show less with jQuery

So I have a webpage at which I have written an addon that allows customers to buy additional products, but I do not want all these products to be shown whenever they enter the page. So I am looking for some kind of "show more" 

<div class="wrapper">
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 1</div>
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 2</div>
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 3</div>
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 4</div>
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 5</div>
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 6</div>
</div>

So I am looking for some kind of way to only show 3 products whenever you enter the page but if you press the show more button it will show the next 3 products.

I have seen many posts on this but I can not find anything related to this.

Ps. If there could be an animation when you press "show more", then that'd be great.

Upvotes: 2

Views: 27328

Answers (3)

Alex Char
Alex Char

Reputation: 33218

You have class so use it and avoid inline-styles. Also check the following approach using jquery :gt()

//this will execute on page load(to be more specific when document ready event occurs)
if ($('.ty-compact-list').length > 3) {
  $('.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 {
  padding: 5px 5px 5px 0px;
  float: left;
  width: 100%;
}
.show-more {
  display: none;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="ty-compact-list">Product 1</div>
  <div class="ty-compact-list">Product 2</div>
  <div class="ty-compact-list">Product 3</div>
  <div class="ty-compact-list">Product 4</div>
  <div class="ty-compact-list">Product 5</div>
  <div class="ty-compact-list">Product 6</div>
  <div class="show-more">Show more</div>
</div>

Upvotes: 9

Mike B
Mike B

Reputation: 1446

Here is a very simple answer using toggle. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(function() { 
    $('.showmoreButton').on('click', function() { 
        $('.showmore').slideToggle("fast");
      });
  });
</script>
<div class="showmoreButton">Toggle Results</div>
<div class="wrapper">
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 1</div>
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 2</div>
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 3</div>
<div class="showmore" style="display: none;">
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 4</div>
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 5</div>
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 6</div>
</div>
</div>

Upvotes: 0

Rich Linnell
Rich Linnell

Reputation: 993

I like the class based way of doing it that Alex has presented, but alternatively you could do this :

  function showFirstThree()
  {
    $('.ty-compact-list').hide();
    $('.ty-compact-list').slice(0,3).show();
  }

  function showAll(){
    $('.ty-compact-list').show();
  }

Upvotes: 0

Related Questions