[jQuery] hide, show, toggle (보이기, 감추기, 토글)

# 버튼을 눌러 div를 show, hide, toggle 합니다.

btnShow  :  div 보이게 하기

btnHide : div 감추기

btnToggle :  div가 감춰져 있으면 보이게 하고 보이면 감춤

 

# <div style=”display:none;”></div>    // div가 감춰진 상태로 생성됩니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<button type=“button” id=“btnShow”>보이기</button>
<button type=“button” id=“btnHide”>감추기</button>
<button type=“button” id=“btnToggle”>토글</button>
<div id=“div1” style=“width:100px; height:100px background-color:black;”>
</div>
<script>
    $(“#btnHide”).click(function(){
        $(“#div1”).hide();
    });
    $(“#btnShow”).click(function(){
        $(“#div1”).show();
    });
    $(“#btnToggle”).click(function(){
        $(“#div1”).toggle();
    });
</script>
cs

 

 

 

 

 

댓글 남기기