$(function () { var num = {}; var closeNum = 1; $(".accordion_box").each(function (index) { // 最初に表示させるliの数 //let num = 2, num[index] = 2; // 閉じた時に表示させるliの数 // 最初はもっと見るボタン表示、閉じるボタン非表示 $(this).find(".btn-more").show(); $(this).find(".btn-close").hide(); // 5行目まで表示 $(this) .find("li:not(:lt(" + num[0] + "))") .hide(); //console.log($(this).children().find("li").length); if($(this).children().find("li").length <= 2){ $(this).find(".btn-more").hide(); $(this).find(".btn-close").hide(); } }); $(".btn-more").on('click',function(){ // liの数を取得 var listItems = $(this).prev().find("li").length; var nnum = $(".accordion_box").find(".btn-more").index(this); //console.log(nnum); // numに+5ずつしていく = 5行ずつ追加する num[nnum] += 2; //console.log("listItems:" + listItems); //console.log("num:" + num[nnum]); $(this) .parent() .find("li:lt(" + num[nnum] + ")") .slideDown(); // liの数よりnumが多い時、 if (listItems <= num[nnum]) { // もっと見るボタン非表示 $(this).hide(); // 閉じるボタン表示 $(this).next(".btn-close").show(); // 閉じるボタンがクリックされたら、 $(".btn-close").on('click',function(){ $(this) .parent() .find("li:gt(" + closeNum + ")") // 6行目以降は非表示 .slideUp(); // 閉じるボタンを非表示 $(this).hide(); // もっと見るボタン表示に $(this).prev(".btn-more").show(); num[nnum] = 2; }); } }); });