setting up rel="next" javascript ajax <a> - seo

Question

I have a tag (show more) that when user clicks it loads the next 10 results onto what is already there.
I looked around to make this seo friendly but all this talks about is ..
how can i make my relevant for seo next page (really showing more instead of next)

Answer 1

Rather than load with ajax, why not just hide everything after the first 10 and have the next tag show the next 10. See following example.
<style>
.hide{
display: none;
}
</style>
<div id='contain'>
<?php
//Not sure what you are loading but this is a dummy loop done in PHP
$i=0;
while($i<101){
//Set the class based on the result. If greater than 10 then hide this result.
$class = ($i<10 ? "result" : "result hide");
echo"<div class='$class'>
<p>MY CONTENT</p>
</div>";
$i++;
}
?>
</div>
<a href='#' id='showMore'>Show 10 More</a>
<script>
$('#showMore').click(function(e){
e.preventDefault();
var i = 0;
$('.hide').each(function(){
if(i<10){
$(this).removeClass('hide');
}
else{
return;
}
i++;
});
});
</script>
That is the only way I can think of solving the problem. I understand ajax is being used to speed up the query.