listのn番目以降を隠したり表示したりするjQuery（gist: 4168815 をもうちょっとかっこよくした）

gistfile1.js

:javascript
  $(function(){
    var contents = '.list li'; //対象のlist
    var trigger = '.trigger'; //スイッチ
    var contentsLength = $(contents).length; //listの個数
    var n = 10; //初期状態で表出したいlistの個数
    
    //listがn個以上ある場合は
    if(contentsLength > n){
      alert(contentsLength);
      //n番目以降を隠す
      for(var i=n; i<contentsLength; i++){
        $(contents+ ':eq(' +i+ ')').hide();
        }
      $(trigger).click(function(){
        if($(contents + ':eq(' +n+ ')').is(":hidden")){
          for(var i=n; i<contentsLength; i++){
            $(contents+ ':eq(' +i+ ')').fadeIn("fast");
          }
          $(trigger).html([
            '<a href="#">',
              '<i class="icon-sort-up"></i>',
              '閉じる',
            '</a>'
          ].join(''));
        }else{
          for(var i=n; i<contentsLength; i++){
            $(contents + ':eq(' +i+ ')').fadeOut("fast");
          }
          $(trigger).html([
            '<a href="#">',
              '<i class="icon-sort-down"></i>',
              'もっと見る',
            '</a>'
          ].join(''));
        }
      });
      //listがn個以下の場合はスイッチを隠す
      }else{
        $(trigger).hide();
      }
  });

変更点

• for で回すのださいので sliceに
• toggleっぽい処理ばっかりだったのでtoggle使うように構成変更

あとhtmlはこのくらいならサーバーサイド側で初めから仕込んでもらってよい気がする

もしくはtoggleする前提にhtml組み直すのもアリかと

うおお、あざっす！
slice…そんな技が・・・知らなんだ(ΦωΦ)
そうか、toggle使うと、$(trigger).htmlの部分はhtmlにそのまま書いて置いたほうがよさそうですねｗ

勉強になるなあ:rabbit:

そうすると8〜29行目までJSから消せるッ・・・！
JS側でHTMLガチャガチャ組むのキライなだけですｗ　必要なときはjsRenderみたいなテンプレートエンジン使いますな。

確かに、JSの中にHTML書くとわかりにくいもんなあ。サーバーサイドに書ける時は書いて置いたほうがよいのですね:hatched_chick: