출처 : https://www.w3schools.com 사이트의 내용을 공부하며 정리하고 있다.


jQuery hide() and show()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});
</script>
</head>
<body>
 
<p>If you click on the "Hide" and "Show"</p>
 
<button id="hide">Hide</button>
<button id="show">Show</button>
 
</body>
</html>
cs


toggle() : 클릭 시 hide and show를 반복한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").toggle();
    });
});
</script>
</head>
<body>
 
<button>Toggle between hiding and showing the paragraphs</button>
 
<p>show and hide effects</p>
 
</body>
</html>
 
cs


저작자표시 비영리 변경금지 (새창열림)

'문돌이의 IT > jQuery' 카테고리의 다른 글

jQuery Effects 제이쿼리 효과 - sliding  (0) 2017.08.10
jQuery Effects 제이쿼리 효과 - fade  (0) 2017.08.09
jQuery event 제이쿼리 이벤트 (2)  (0) 2017.08.07
jQuery event 제이쿼리 이벤트 (1)  (0) 2017.08.06
다양한 jQuery 셀렉터들 (Selector)  (0) 2017.07.27

+ Recent posts

티스토리툴바