もっと見るをクリックするとさらにデータが表示されるようにしたい。

Question

<div id="wrap">
 <span class="more">もっとを見る</span>
 <script>

    $(document).ready(function(){

            var div = $('<div></div>');
            div.prop('id','main');
            $('#wrap').append(div);

             $.getJSON("http://localhost/json_source.html", function(result){
                        $.each(result, function(i, field){
                                    console.log(field.article_title);


                                    var ctnr = $('<article></article>');
                                      ctnr.prop('id',field.article_id);
                                      $('#main').append(ctnr);

                                    var title = $('<div></div>');
                                      title.prop(field.article_title);
                                      $('#'+field.article_id).append(title);
                                 
                                    if(i>6){
                                      return false;
                                    }		
                        });    
              });

         });

 </script> 
</div>

現状では、最大６件データを表示しているのですが、最初は３件だけ出して、もっと見るをクリックすると、
６件表示するようにしたいのですが、どうすればいいでしょうか。

Answer 1

https://www.google.co.jp/search?q=もっと見る

Answer 2

   $("article:gt(2)").hide();
   $(".more").click(function(){
     $("article").show();
   }); 

hide,show,:gtで自力で実装できた。

Answer 3

「もっと見る」で表示する要素にクラスをつけて、それをCSSで非表示にしておき、なんらかのイベント時にそのクラスを外せばよいです。