jquery
[jquery] 더보기 기능 구현하기 (more)
http://portfolio.wonpaper.net
2023. 12. 8. 00:43
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<html>
<head>
</head>
<script
src="https://code.jquery.com/jquery-3.7.1.js"></script>
<body>
<div class="list">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
</div>
<a href="#" id="load">MORE</a>
<script>
$('.list > div').hide();
$(".list > div").slice(0, 5).css("display", "block");
$("#load").click(function(e){
e.preventDefault();
$(".list > div:hidden").slice(0, 5).fadeIn(500).css('display', 'block'); // 클릭시 more 갯수 지저정
if($(".list > div:hidden").length == 0){ // 컨텐츠 남아있는지 확인
$('#load').fadeOut(500); // 컨텐츠 없을 시 버튼 사라짐
}
});
</script>
</body>
</html>
|
cs |