Skip to content

Instantly share code, notes, and snippets.

@taea
Created November 29, 2012 13:41
Show Gist options
  • Save taea/4169169 to your computer and use it in GitHub Desktop.
Save taea/4169169 to your computer and use it in GitHub Desktop.
listのn番目以降を隠したり表示したりするjQuery(gist: 4168815 をもうちょっとかっこよくした)
$(function(){
var contents = '.list li'; //対象のlist
var trigger = '.trigger'; //スイッチ
var contentsLength = $(contents).length; //listの個数
var n = 10; //初期状態で表出したいlistの個数
//listがn個以上ある場合は
if(contentsLength > n){
//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();
}
});
@taea
Copy link
Author

taea commented Nov 29, 2012

でもだいぶ力技感がw

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment