メモ：MOREボタンに使えそうな簡単なjQueryコード

APIとかでまとめて読み込んでソース成形したものを、「MORE」や「もっと見る」などのボタンで小出しにしながら表示させるときに使えそうな簡単なコードです。面倒なんでjQuery仕様となっています。
なんていうか、毎回ajaxで通信取得するほどの量もないけど、まとめて表示するには多い…みたいなときに使うかなと思います。

<!--ulが一度に表示させるひとかたまり-->
<ul class="open">
    <li>test</li>
    <li>test</li>
    <li>test</li>
</ul>
<ul>
    <li>test2</li>
    <li>test2</li>
    <li>test2</li>
</ul>
<ul>
    <li>test3</li>
    <li>test3</li>
    <li>test3</li>
</ul>
<p id="btn">ボタン</p>

/*ulは基本非表示に、.opneがついたものは表示するように*/
ul{
  display:none;
}
ul.open{
  display:block;
}

$('#btn').click(function(){
    $('.open+ul').addClass('open');
});

隣接セレクタって結構便利ですよね。
ちょっと工夫すればアニメーションもつけられるし、結構便利に使えるのではと思います。

改訂版 Webデザイナーのための jQuery入門
-Amazonで見る