同一ページ内での無限スクロール（インフィニットスクロール）

すでに30行分あるコンテンツを初期表示3件として、【続きを読む】ボタンを設置して、その都度3件ずつ読み込む、というような動作をさせたいと思ってます。
（30件で終了）

infinit scroll プラグインでは読み込むコンテンツを別ページで用意する必要があるので希望する動作とはなりません。
（そもそも無限スクロールというわけではない？）

良いプラグインや参考になるページなどあればぜひ教えていただければと存じます。

よろしくお願いいたします

kei344

2017/01/27 13:34

表示するためのデータをどのように用意するつもりでしょうか。具体的に追記いただけませんか？

SaoTan

2017/01/27 13:38

ありがとうございます。今回はECサイトの商品リストとしてデータを引っ張ってきています。（これでご返答になりますでしょうか…）

kei344

2017/01/27 13:41

何のデータか、ではなく「どのように」の部分が必要です。RubyやPHPなどサーバ側から送るのか、別途ファイルとして書き出すかなど。

SaoTan

2017/01/27 13:54

失礼しました。phpで出したものをSmartyで表示させています。こういう事で足りますでしょうか？

行動規範の内容に同意します

回答3件

こういう感じでしょうか。

HTML
1<div class="aaa">aaa</div>
2<div class="aaa">aaa</div>
3<div class="aaa">aaa</div>
4<div class="aaa">aaa</div>
5<div class="aaa">aaa</div>
6<div class="aaa">aaa</div>
7<div class="aaa">aaa</div>
8<div class="aaa">aaa</div>
9<div class="aaa">aaa</div>
10<div class="aaa">aaa</div>
11<div class="aaa">aaa</div>
12<div class="aaa">aaa</div>
13<div class="aaa">aaa</div>
14<div class="aaa">aaa</div>
15<div class="aaa">aaa</div>
16<div class="aaa">aaa</div>
17<div class="aaa">aaa</div>
18<div class="aaa">aaa</div>
19<div class="aaa">aaa</div>
20<div class="aaa">aaa</div>
21<div class="aaa">aaa</div>
22<div class="aaa">aaa</div>
23<div class="aaa">aaa</div>
24<div class="aaa">aaa</div>
25<button>button</button>

CSS
1.aaa {
2	display: none;
3}

JavaScript
1$( _=> {
2	$( 'button' ).on( 'click', _=> {
3		$( '.aaa:hidden:lt(3)' ).show();
4	} );
5} );
6```**動くサンプル：**[https://jsfiddle.net/L525go7z/](https://jsfiddle.net/L525go7z/)
7
8---
9
10【:hidden Selector | jQuery API Documentation】
11[https://api.jquery.com/hidden-selector/](https://api.jquery.com/hidden-selector/)
12
13【:lt() Selector | jQuery API Documentation】
14[https://api.jquery.com/lt-selector/](https://api.jquery.com/lt-selector/)