slideToggleで「続きを読む」の基本。
細かい制御はおいておいて、とりあえず覚書。
li 要素を3つずつ表示するプログラムです。idをつけて制御しているけど、ul の子要素を数えて上からカウントもできるんだろうけどなぁ。
もっと効率の良いというか美しい組み方知っている人がいたら教えて下さい。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<style>
li{
display : none;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(function(){
var toggleCount = 1; // 総カウント数
var clickCount = 3; // 1回で表示する要素数
$("#push").click(function() {
for (var i = 1; i <= clickCount; i++){
$("#demo" + toggleCount).slideToggle();
toggleCount++;
}
return false;
})
});
</script>
</head>
<body>
<input id="push" type="button" value="続きを表示" />
<ul>
<li id="demo1">TEST1</li>
<li id="demo2">TEST2</li>
<li id="demo3">TEST3</li>
<li id="demo4">TEST4</li>
<li id="demo5">TEST5</li>
<li id="demo6">TEST6</li>
<li id="demo7">TEST7</li>
<li id="demo8">TEST8</li>
<li id="demo9">TEST9</li>
</ul>
</body>
</html>