You will need to load the next 10 posts with an AJAX request and keep the current offset stored in the DOM.
Attach an ID to the <span>
element which is your button, in my example I have used #load_posts
.
Then using jQuery, you can easily setup the click event for the button to fire the AJAX request.
So the button:
<span class="ar-bottom-link-tabs" id="load_posts">
<span>
<a href="#">Load more »</a>
</span>
</span>
And then add the jQuery underneath outside of the loop:
<script type="text/javascript">
// We have already loaded 10 posts, so set it up as 10 by default
var currentOffset = 10;
var categoryId = 8;
$('#load_posts').bind('click', function(e){
// Stop the link reloading the page
e.preventDefault();
// Asign variables to an array
var data = {
offset: currentOffset,
catid: categoryId
};
// AJAX $_POST request to PHP file
$.post('path_to_php_file.php', data, function(response) {
// do something with the response... loop through and append to the tab content
// so you could return the output as JSON
// Add 10 to the offset
currentOffset+10;
});
});
</script>
Then in the PHP file used for the AJAX request just repeat your get_posts() call:
$args = array(
'cat' => $_REQUEST['catid'],
'offset' => $_REQUEST['offset'],
'showposts' => 10
);
$posts = get_posts($args);
I will let you fill in the gaps but this should send you on your way in the right direction.