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>

```