リストの要素を非表示にして、「詳細を表示」機能を追加するにはどうすればよいですか？

Question

私は結果のリストを作成するためにjavascriptを使用しています。私はfor-loopをいくつかのデータを繰り返し、mydata divを作成し、それを結果divに追加します。のは、それがこのようなものになりますふりをしてみましょう：表示のみが時間の5つの結果である私が何をしたいのか

<div id="results"> 
    <div class="mydata">data 1</div> 
    <div class="mydata">data 2</div> 
    ... 
    <div class="mydata">data 20</div> 
</div> 

を、ユーザーがより多くのを見たいはずです、彼らは次の5ショーをクリックすることができますか詳細を表示ボタン（または同様のもの）。何か案は？

ユーザーが「もっと見る」をクリックするたびに、残りの要素すべてではなく、次の5つの要素を再表示したいと思います。各クリックが表示されるまで、各クリックにより多くの要素が明らかになります。

.hiddenData { display: none } 

をし、それがの必要量から、このクラスを追加/削除するためのハンドラを作成した後5.

を超えたdiv要素の任意の量に添付：

Answer 1

「続きを読む」クリックします。

次の5つの結果をクリックして表示し、すべての項目が表示されたらリンクを削除します。

$('.mydata:gt(4)').hide().last().after(
    $('<a />').attr('href','#').text('Show more').click(function(){ 
     var a = this; 
     $('.mydata:not(:visible):lt(5)').fadeIn(function(){ 
     if ($('.mydata:not(:visible)').length == 0) $(a).remove(); 
     }); return false; 
    }) 
); 

作業例：関係なく、他の人がここで示唆されているもののhttp://jsfiddle.net/niklasvh/nTv7D/

、私はないはCSSを使って要素を隠しますが、ユーザーはJSが無効になっている場合ので、代わりにJSでそれを行うと、 CSSを使用して要素を非表示にすると、表示されません。しかし、JSが無効になっていると、隠されたり、ボタンが表示されたりすることはありません。そのため、完全なnoscriptの代替機能があります+検索エンジンは隠しコンテンツが嫌いです（ただし、 DOM負荷で行う）。