Загрузите новый div в выходящий div с дополнительной загрузкой

Question

Я хочу, чтобы какой-то плагин только одна вещь должна быть другой, есть 2 ссылки для 2 div, я хочу показать там пример 10 div, но только с одной кнопкой, например «Load More «Как я могу это сделать?

HTML

<a href="#hidden1" class="link">Click1</a> 
<a href="#hidden2" class="link">Click2</a> 
<div id="outer"> 
<div id="inner">Initial content</div> 
</div> 
<div style="display:none" id="hidden1">After click event showing hidden 1</div> 
<div style="display:none" id="hidden2">After click event showing hidden 2</div> 

Js

$(document).ready(function() { 
    $('.link').click(function() 
        { 
     var id = $(this).attr('href'); 
         $('#inner').fadeOut('slow', function() { 
      $('#inner').html($(id).html()); 
      $('#inner').fadeIn('slow'); 


     }) 
    }) 
}) 

CSS

#hideMsg{ 
    text-align:center; 
    padding-top:10px; 
} 

http://jsfiddle.net/G5qGs/2/

Answer 1

Вы можете сделать это что-то вроде этого.

Создать ГРУЗОМ больше кнопку

<a href="javascript:void(0);" id="loadmore">Load More</a> 

Использовать Javascript, как показано ниже

var count = 1; 
    $('#loadmore').click(function() { 
     $('#inner').fadeOut('slow', function() { 
      $('#inner').html($("#hidden" + count).html()); 
      $('#inner').fadeIn('slow'); 
      count++; 
     }) 
    }); 

Рабочий пример

http://jsfiddle.net/G5qGs/25/

PS: Вы не могли бы хотеть, чтобы отобразить "Нет больше содержания" в конце. что может быть достигнуто с использованием простого условия if else