J's Rhapsody

[JQUERY] 슬라이드토글(SlideToggle)텍스트 바꾸기 본문

IT/JQUERY

[JQUERY] 슬라이드토글(SlideToggle)텍스트 바꾸기

J's Rhapsody 2018. 1. 29. 15:41

jQuery메소드 slideToggle()을 이용하면 접거나 펼치기 기능을 사용할 수 있다.


아래의 스크립트는 slideToggle을 이용할 때 텍스트를 바꾸는 소스이다.


1

2

3

4

$('.btn_timetable_show').click(function(){

    $("#timetable").slideToggle();

     $(this).text( $(this).text() == 'View Less' ? "View More" : "View Less");

});

Colored by Color Scripter

cs



http://api.jquery.com/slidetoggle/


<HTML 소스>


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
<section id="fun-facts">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6">
                <div class="fun-fact-block text-center">
                  <h2 class="count" data-from="0" data-to="24" data-speed="500">24 hrs</h2>
                  <span class="fact-icon"></span>
                  <p>Registered before 3PM PST</p>
                </div>
            </div> <!-- END col-lg-3 col-md-6-->
            <div class="col-lg-6 col-md-6">
                <div class="fun-fact-block text-center">
                    <h2 class="count" data-from="0" data-to="48" data-speed="500">48 hrs</h2>
                    <span class="fact-icon"></span>
                    <p>Registered after 3PM PST</p>
                </div>
            </div> <!-- END col-lg-3 col-md-6-->
        </div> <!-- END row-->
        <div class="row">
            <div class="col-lg-12 col-md-6" style="color:white;text-align:right;cursor: pointer;">
                <p class="btn_timetable_show">View More </p>
            </div>
        </div>
        <div id="timetable" style="display:none">
            <div class="row">
                <p>Contents</p> 
            </div> <!-- END row-->
        </div>
    </div> <!-- END container-->
</section> <!-- END fun-facts-->
cs


<결과>







Comments