1

I want to load the first 3 list items each div.content, then show the next 3 items when the user clicks the "SHOW MORE"

And When the user click "SHOW LESS", back to display block the first 3 list

I see another answer ref. jQuery load first 3 elements, click “load more” to display next 5 elements

But I can't be apply to my code

How can I best achieve this?

Note: Sorry my English is not good.

This My HTML 

<div class="content">
  <div class="items">1</div>
  <div class="items">2</div>
  <div class="items">3</div>
  <div class="items">4</div>
  <div class="items">5</div>
  <div class="items">6</div>
  <div class="items">7</div>
  <div class="items">8</div>
  <div class="items">9</div>
  <a href="#" id="ShowMore">SHOW MORE</a>
  <a href="#" id="ShowLess">SHOW LESS</a>
</div>
<div class="content">
  <div class="items">11</div>
  <div class="items">12</div>
  <div class="items">13</div>
  <div class="items">14</div>
  <div class="items">15</div>
  <div class="items">16</div>
  <div class="items">17</div>
  <div class="items">18</div>
  <div class="items">19</div>
  <a href="#" id="ShowMore">SHOW MORE</a>
  <a href="#" id="ShowLess">SHOW LESS</a>
</div>
<div class="content">
  <div class="items">21</div>
  <div class="items">22</div>
  <div class="items">23</div>
  <div class="items">24</div>
  <div class="items">25</div>
  <div class="items">26</div>
  <div class="items">27</div>
  <div class="items">28</div>
  <div class="items">29</div>
  <a href="#" id="ShowMore">SHOW MORE</a>
  <a href="#" id="ShowLess">SHOW LESS</a>
</div>
Jones Joseph
  • 4,703
  • 3
  • 22
  • 40
siwakorn
  • 417
  • 4
  • 10

3 Answers3

3

The following snippet shows how to show next three items on clicking show more and collapse back to the first three items on clicking show less.

Changed the ID to CLASS as this is the right way to so it. Multiple elements should not have same id.

Explanation
First hide all items except first three using the following selector:
.content .items:nth-child(n+1):nth-child(-n+3)

Then on clicking Show More button find the next three hidden items with the following selector:
.items:not(:visible):lt(3)
This selector selects the first three items which are not visible.

Finally on Show Less, hide all elements and show only the first three as before.

$(function(){
$('.content .items').hide();
$('.content .items:nth-child(n+1):nth-child(-n+3)').show();

$('.ShowMore').click(function(){
$(this).closest('.content').find('.items:not(:visible):lt(3)').show();
})

$('.ShowLess').click(function(){
$(this).closest('.content').find('.items').hide();
$(this).closest('.content').find('.items:lt(3)').show();
})

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="items">1</div>
  <div class="items">2</div>
  <div class="items">3</div>
  <div class="items">4</div>
  <div class="items">5</div>
  <div class="items">6</div>
  <div class="items">7</div>
  <div class="items">8</div>
  <div class="items">9</div>
  <a href="#" class="ShowMore">SHOW MORE</a>
  <a href="#" class="ShowLess">SHOW LESS</a>
</div>
<div class="content">
  <div class="items">11</div>
  <div class="items">12</div>
  <div class="items">13</div>
  <div class="items">14</div>
  <div class="items">15</div>
  <div class="items">16</div>
  <div class="items">17</div>
  <div class="items">18</div>
  <div class="items">19</div>
  <a href="#" class="ShowMore">SHOW MORE</a>
  <a href="#" class="ShowLess">SHOW LESS</a>
</div>
<div class="content">
  <div class="items">21</div>
  <div class="items">22</div>
  <div class="items">23</div>
  <div class="items">24</div>
  <div class="items">25</div>
  <div class="items">26</div>
  <div class="items">27</div>
  <div class="items">28</div>
  <div class="items">29</div>
  <a href="#" class="ShowMore">SHOW MORE</a>
  <a href="#" class="ShowLess">SHOW LESS</a>
</div>
Jones Joseph
  • 4,703
  • 3
  • 22
  • 40
1

This is an adaptation of the code from the referenced answer:

$(document).ready(function() {
  $('.items').hide();
  $('.content').find('.items:lt(3)').show();
  
  $('.ShowMore').click(function(ev) {
    $(ev.currentTarget).parent().find('.items').show();
  });

  $('.ShowLess').click(function(ev) {
    $(ev.currentTarget).parent().find('.items').not(':lt(3)').hide();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="items">1</div>
  <div class="items">2</div>
  <div class="items">3</div>
  <div class="items">4</div>
  <div class="items">5</div>
  <div class="items">6</div>
  <div class="items">7</div>
  <div class="items">8</div>
  <div class="items">9</div>
  <a href="#" class="ShowMore">SHOW MORE</a>
  <a href="#" class="ShowLess">SHOW LESS</a>
</div>
<div class="content">
  <div class="items">11</div>
  <div class="items">12</div>
  <div class="items">13</div>
  <div class="items">14</div>
  <div class="items">15</div>
  <div class="items">16</div>
  <div class="items">17</div>
  <div class="items">18</div>
  <div class="items">19</div>
  <a href="#" class="ShowMore">SHOW MORE</a>
  <a href="#" class="ShowLess">SHOW LESS</a>
</div>
<div class="content">
  <div class="items">21</div>
  <div class="items">22</div>
  <div class="items">23</div>
  <div class="items">24</div>
  <div class="items">25</div>
  <div class="items">26</div>
  <div class="items">27</div>
  <div class="items">28</div>
  <div class="items">29</div>
  <a href="#" class="ShowMore">SHOW MORE</a>
  <a href="#" class="ShowLess">SHOW LESS</a>
</div>
raul.vila
  • 1,984
  • 1
  • 11
  • 24
0
  • The identifier must be unique, this approach changes those ids into class.
  • You can use this selector to hide the rest of .items: .items:gt(2)
  • Those links (less and more) have a data-attribute to indicate the action.

This approach doesn't hide the Show less nor Show more links

var parentSelector = "div.content",
    showItemsSelector = ".items:gt(2)",
    showLessSelector = ".ShowMore,.ShowLess";

$(document).ready(function() {
  $(parentSelector).each(showItemsHandler);
  $(showLessSelector).on('click', showHideHandler);
});

function showHideHandler() {
 if ($(this).data('action') === 'show') $(this).closest(parentSelector).children('.items').show();
 else showItemsHandler.bind($(this).closest(parentSelector))();
}

function showItemsHandler() {
  $(this).children(showItemsSelector).hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="items">1</div>
  <div class="items">2</div>
  <div class="items">3</div>
  <div class="items">4</div>
  <div class="items">5</div>
  <div class="items">6</div>
  <div class="items">7</div>
  <div class="items">8</div>
  <div class="items">9</div>
  <a href="#" data-action='show' class="ShowMore">SHOW MORE</a>
  <a href="#" data-action='hide' class="ShowLess">SHOW LESS</a>
</div>
<div class="content">
  <div class="items">11</div>
  <div class="items">12</div>
  <div class="items">13</div>
  <div class="items">14</div>
  <div class="items">15</div>
  <div class="items">16</div>
  <div class="items">17</div>
  <div class="items">18</div>
  <div class="items">19</div>
  <a href="#" data-action='show' class="ShowMore">SHOW MORE</a>
  <a href="#" data-action='hide' class="ShowLess">SHOW LESS</a>
</div>
<div class="content">
  <div class="items">21</div>
  <div class="items">22</div>
  <div class="items">23</div>
  <div class="items">24</div>
  <div class="items">25</div>
  <div class="items">26</div>
  <div class="items">27</div>
  <div class="items">28</div>
  <div class="items">29</div>
  <a href="#" data-action='show' class="ShowMore">SHOW MORE</a>
  <a href="#" data-action='hide' class="ShowLess">SHOW LESS</a>
</div>
Ele
  • 33,468
  • 7
  • 37
  • 75