CODEWITHSUNDEEP
javascriptjquery
TechBrush.Org
TechBrush.Org

Reputation: 29

Show more button to work as pagination in javascript or jquery

My problem at first site seems to be a very easy and very common 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>

Upvotes: 1

Views: 15335

Answers (3)

TechBrush.Org
TechBrush.Org

Reputation: 29

Okay guys I have figured it out myself, Here is how i did it. http://techbrush.org/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.

Upvotes: 0

developers-have-no-vacation
developers-have-no-vacation

Reputation: 642

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.

Upvotes: 0

vitkon
vitkon

Reputation: 1078

here's a working solution for your scenario: http://jsfiddle.net/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();
});

Upvotes: 4

Related Questions