もっと見る機能を簡単に実現したい

Question

下記の様なタグ構成の画像リストが4列27行分あります。
最初の2行分(8個表示)以降非表示にし、もっと見るボタン設置しようと考えております。
display:none,blockくらいの簡易的なものでいいのですがjavascript,jqueryを使用して実現できますでしょうか？
ご教授頂きたくよろしくお願いします。

<div> <div> <div> <p> <a> <img alt="画像が入っています。"> </a> </p> <p> <span>ラベル(2013/1/1等)</span> </p> <h3> <a>説明文</a> </h3> </div> </div> </div>

Answer 1

動作確認していませんが、それっぽい物になっていると思います。

※仕様に勘違いがあったので直しました。

// js部分
var moreNum = 0; // 現在表示しているmore
var lastNum = 3; // 最後のmore
$( document ).ready( function(){
// もっと見るボタンクリック
$( ".more_btn" ).click( function(){
moreNum++;
$( "#more_" + moreNum ).slideDown();
if( lastNum == moreNum ){ // 最後のmoreを開いたらボタン非表示
$( ".more_btn" ).hide();
}
} );
} );

// html部分

<div> <div>#データ1#</div> <div>#データ2#</div> </div> <div id="more_1" style="display:none;"> <div>#データ3#</div> <div>#データ4#</div> </div> <div id="more_2" style="display:none;"> <div>#データ5#</div> <div>#データ6#</div> </div> <div id="more_3" style="display:none;"> <div>#データ7#</div> <div>#データ8#</div> </div> <div class="more_btn">もっと見る</div>

Comments

[spring]

解決しました!
ご回答ありがとう御座いました。