0

I want to show the next two list elements on the hyperlink(Load More) click.

Is there any way to achieve this in Jquery by changing the css properties.

.row{
    display:none;
}
.row:nth-child(-n+3){
    display:block;
}
<div class="content">
<ol>
<li class="notarow">I'm not a row and I must remain visible</li>
<li class="row">Row 1</li>
<li class="row">Row 2</li>
<li class="row">Row 3</li>
<li class="row">Row 4</li>
<li class="row">Row 5</li>
<li class="row">Row 6</li>
</ol>
</div>

<a href="#" class="load-more">Load more</a>
min2bro
  • 4,509
  • 5
  • 29
  • 55
  • The every next 2 until all is visible?, and when all are, then what? ... start hiding them 2-by-2 or all in one go? – Asons Jul 10 '18 at 01:09
  • @LGSon, True and at the end just stop no need to hide. The only problem is my list is ordered and when you click load more it starts from 1 instead from 3. – min2bro Jul 10 '18 at 01:22

3 Answers3

1

Make your link do this javascript function, or (preferably) use a button: 

<a href="javascript:showMore()">

Then do this JS:

var numberShown = 2;
function showMore() {
   //Add any amount you'd like
   numberShown += 2;
   for(var i = 0; i < numberShown; ++i) {
   document.getElementsByClassName("row")[i].style.display = "block";
   }
}

I haven't tested it, I hope it works!

aryanm
  • 1,183
  • 14
  • 26
  • it loads from No. 1 instead it should start from 3. looks like issue with the ordered list when display block is set – min2bro Jul 10 '18 at 01:23
1

Done by only jQuery to show.

All I've done has comment there.

// first hide all
$('.row').css('display', 'none')

// how many to show
var display_count = 0;

// function to show
function show(start, end){  
  for(var i=start; i<end ;i++){  
    $('.row').eq(i).css('display', 'block')
  }
}

// bind click event to show between n and n+2
$('.load-more').click(function(event){
  show(display_count, display_count+2);
  display_count +=2;
})
// trigger the first time
.trigger('click');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<ol>
<li class="notarow">I'm not a row and I must remain visible</li>
<li class="row">Row 1</li>
<li class="row">Row 2</li>
<li class="row">Row 3</li>
<li class="row">Row 4</li>
<li class="row">Row 5</li>
<li class="row">Row 6</li>
</ol>
</div>

<a href="#" class="load-more">Load more</a>

** Update **

Use css('display', 'block') instead of .show() should solve <li> be display:list-item issue.

Terry Wei
  • 1,521
  • 8
  • 16
  • The only problem is my list is ordered and when you click load more it starts from 1 instead from 3. – min2bro Jul 10 '18 at 01:21
  • It means that `Row1` and `Row2` are invisible when start? – Terry Wei Jul 10 '18 at 01:23
  • In ordered list, 1. Row1 2. Row2, and when click Load more next two items should be 3. Row3 4. Row4. But looks like there is issue with css property display block , check this https://stackoverflow.com/questions/6257041/why-does-the-list-style-disappear-when-display-block-is-added-to-a-list-item-in – min2bro Jul 10 '18 at 01:25
  • You've modified the html in your question from `div` to `li`... I modified my answer. – Terry Wei Jul 10 '18 at 01:36
0

It is pretty simple, but first, change the <a> to a <button> or something with an onclick (also, this solution doesnt contain jquery):

<button class="load-more" onclick="loadMore()"></button>

Then, have the following script:

var whatToLoad = 2;
function loadMore()
{
    document.getElementsByClassName("row")[whatToLoad].style.display = "block";
    document.getElementsByClassName("row")[whatToLoad + 1].style.display = "block";
    whatToLoad += 2;
}

Not tested, but you should get the idea

Joe C.
  • 397
  • 4
  • 15
  • it loads from No. 1 instead it should start from 3. looks like issue with the ordered list when display block is set – min2bro Jul 10 '18 at 01:23