Show more button to work as pagination in javascript or jquery - Stack Overflow

admin管理员组

文章数量:1395025

My problem at first site seems to be a very easy and very mon which is often posted on internet and known as "show more " text . But what i really want is quite different. First thing i have html elements with nested elements instead of plain text. secondly i dnt want to know all the rest of hidden elements at once but in blocks of 3 elements or 4 elements or so Consider the following example

<div class = "outer" >

  <div class="child" > one </div>
  <div class="child" > one </div>
  <div class="child" > one </div>
  ------above elements to show by default when page loads------

  <div class="child" > one </div>
  <div class="child" > one </div>
  <div class="child" > one </div>

------these three on clicking "show more"------

  <div class="child" > one </div>
  <div class="child" > one </div>
  <div class="child" > one </div>

------these three again on clicking "show more" again ------

  and so on until all the elements are not finished.

</div>

Now this also is quite approachable but how to do this if we have to do it on multiple level? means we have move div's with outer div as follows

<div class = "outer" >

      <div class="child" > one </div>
      <div class="child" > one </div>
      <div class="child" > one </div>...."show more"

</div>
    <div class = "outer" >

      <div class="child" > one </div>
      <div class="child" > one </div>
      <div class="child" > one </div>...."show more"

</div>
    <div class = "outer" >

      <div class="child" > one </div>
      <div class="child" > one </div>
      <div class="child" > one </div>...."show more"

</div>

My problem at first site seems to be a very easy and very mon which is often posted on internet and known as "show more " text . But what i really want is quite different. First thing i have html elements with nested elements instead of plain text. secondly i dnt want to know all the rest of hidden elements at once but in blocks of 3 elements or 4 elements or so Consider the following example

<div class = "outer" >

  <div class="child" > one </div>
  <div class="child" > one </div>
  <div class="child" > one </div>
  ------above elements to show by default when page loads------

  <div class="child" > one </div>
  <div class="child" > one </div>
  <div class="child" > one </div>

------these three on clicking "show more"------

  <div class="child" > one </div>
  <div class="child" > one </div>
  <div class="child" > one </div>

------these three again on clicking "show more" again ------

  and so on until all the elements are not finished.

</div>

Now this also is quite approachable but how to do this if we have to do it on multiple level? means we have move div's with outer div as follows

<div class = "outer" >

      <div class="child" > one </div>
      <div class="child" > one </div>
      <div class="child" > one </div>...."show more"

</div>
    <div class = "outer" >

      <div class="child" > one </div>
      <div class="child" > one </div>
      <div class="child" > one </div>...."show more"

</div>
    <div class = "outer" >

      <div class="child" > one </div>
      <div class="child" > one </div>
      <div class="child" > one </div>...."show more"

</div>

• javascript
• jquery

Share Improve this question Follow asked Feb 5, 2014 at 11:44 TechBrush.OrgTechBrush.Org 2911 gold badge11 silver badge55 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

here's a working solution for your scenario: http://jsfiddle/4C3AM/

var itemsCount = 0,
itemsMax = $('.outer div').length;
$('.outer div').hide();

function showNextItems() {
    var pagination = 3;

    for (var i = itemsCount; i < (itemsCount + pagination); i++) {
        $('.outer div:eq(' + i + ')').show();
    }

    itemsCount += pagination;

    if (itemsCount > itemsMax) {
        $('#showMore').hide();
    }
};

showNextItems();

$('#showMore').on('click', function (e) {
    e.preventDefault();
    showNextItems();
});

You can give the the container divs a unique ID so you can pick it up with javascript, with javascript you can and apply a css class to the element. The following CSS example will hide the element at first.

CSS:

.outervisible{display:block;}
.outerhidden{display:none;}

HTML:

<div id = "outer1" >

      <div class="child" > one </div>
      <div class="child" > one </div>
      <div class="child" > one </div>....<button onClick="showsomething('outer2')">show more</button> 

</div>
    <div id = "outer2" class="outerhidden" >

      <div class="child" > one </div>
      <div class="child" > one </div>
      <div class="child" > one </div>...."show more"

</div>

// etc

Then we can write a javascript function to change the class of the containing div, allowing us to show it when we click the button.

<script>
function showsomething(pageid){
    document.getElementById(pageid).className = "outervisible";
}
</script>

Please note that you will have to do more than copy-paste my example, but I hope you get the idea behind it and work it out.

Okay guys I have figured it out myself, Here is how i did it. http://techbrush/show-more-text-to-work-as-pagination/ But I am sure there is a better smarter and cleaner way to do that. please post if you have. Thanks.

本文标签： Show more button to work as pagination in javascript or jqueryStack Overflow