Notice
Recent Posts
Recent Comments
Tags more
«   2024/05   »
일 월 화 수 목 금 토
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
Archives
Today
Total
관리 메뉴

웹개발자의 기지개

[jquery] 더보기 기능 구현하기 (more) 본문

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

 

 

 

참고 : https://eunyoe.tistory.com/221

'jquery' 카테고리의 다른 글

[Javascript] 랜덤색상 얻기  (1) 2024.02.09
[jQuery] 핸드폰번호 자동입력 (with 하이픈)  (3) 2023.12.22
[JQuery] 특정노드의 하위요소에서 모든 a태그의 속성값을 새창(_blank) 기능을 추가하기  (0) 2023.06.13
[jquery] 달력 datepicker, 매달 현재일부터 마지막 날까지만 선택가능하도록 (기타 다양한 조건 有)  (0) 2023.03.10
[jQuery] 유용한 실무팁1 - jquery Modal 형태로 백엔드처리하기  (0) 2023.01.03
'jquery' Related Articles more
Comments