DEMO
아래 데모페이지를 확인해주세요.
더 보기 버튼을 눌러 리스트를 불러올 수 있습니다.
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--[if lt IE 9]>
<script src="../common/js/html5shiv.js"></script>
<![endif]-->
<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<meta name="format-detection" content="telephone=no">
<title>더보기(MORE) 버튼을 눌러 일정갯수의 리스트 더 보기</title>
<link type="text/css" rel="stylesheet" href="css/reset.css" media="screen" />
<link type="text/css" rel="stylesheet" href="css/js-load.css" media="screen" />
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/js-load.js"></script>
</head>
<body>
<header>
<h1>더보기(MORE) 버튼을 눌러 일정갯수의 리스트 더 보기</h1>
</header>
<div id="contents">
<div id="js-load" class="main">
<ul class="lists">
<li class="lists__item js-load">test1</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test2</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test3</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test4</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test5</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test6</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test7</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test8</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test9</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test10</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test11</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test12</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test13</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test14</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test15</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test16</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test17</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test18</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test19</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test20</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test21</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test22</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test23</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test24</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
<li class="lists__item js-load">test25</li>
<li class="lists__item js-load">txttxttxttxttxttxt</li>
</ul>
<div id="js-btn-wrap" class="btn-wrap"> <a href="javascript:;" class="button">더보기</a> </div>
</div>
<footer>
<p>(C) <a href="https://nanati.me/">nanati.me</a> by nanati</p>
</footer>
</div>
</body>
</html>
css
.js-load {
display: none;
}
.js-load.active {
display: block;
}
.is_comp.js-load:after {
display: none;
}
.btn-wrap, .lists, .main {
display: block;
}
.main {
max-width: 640px;
margin: 0 auto;
}
.lists {
margin-bottom: 4rem;
}
.lists__item {
padding: 20px;
background: #EEE;
}
.lists__item:nth-child(2n) {
background: #59b1eb;
color: #fff;
}
.btn-wrap {
text-align: center;
}
js
$(window).on('load', function () {
load('#js-load', '4');
$("#js-btn-wrap .button").on("click", function () {
load('#js-load', '4', '#js-btn-wrap');
})
});
function load(id, cnt, btn) {
var girls_list = id + " .js-load:not(.active)";
var girls_length = $(girls_list).length;
var girls_total_cnt;
if (cnt < girls_length) {
girls_total_cnt = cnt;
} else {
girls_total_cnt = girls_length;
$('.button').hide()
}
$(girls_list + ":lt(" + girls_total_cnt + ")").addClass("active");
}
load('#js-load', '4'); 이 부분의 숫자를 변경하면 더 보기를 눌렀을 때 몇 개씩 더 보여줄 것인가 변경할 수 있습니다.