[자바스크립트/jQuery] 버튼 클릭 시 박스 숨기기, 보이기 (show, hide)

서문

버튼을 클릭했을 때, 혹은 특정 이벤트가 발생했을 때,

특정 영역이 나타나거나 사라지는 패턴들 여러 사이트에서 많이 볼 수 있습니다.

이런 애니메이션 효과는 jQuery를 사용하면 손쉽게 구현할 수 있습니다.

이 글에서는 jQuery를 활용하여 버튼을 클릭 시 해당하는 박스를 숨기고 보이는 기능에 대해서 설명하도록 하겠습니다.

 

반응형

 

---

 

본문

버튼 클릭으로 숨기고 보이기 처리하기

기본 동작 페이지

 

위의 이미지와 같이 숨기기와 보이기 버튼을 만들어두고,

숨기기 버튼을 클릭 시 패널이 사라지고, 보이기 버튼을 클릭 시 패널이 다시 보이게 되는 것을 한번 해보겠습니다.

 

<script type="text/javascript">
    $(document).ready(function() {
        $("#hide_btn").click(function() {
            $("#panel").hide();
        });
        $("#show_btn").click(function() {
            $("#panel").show();
        });
    });
</script>

<div class="box">
    <div id="panel">패널의 내용이 표시되는 곳 입니다.</div>
    <input type="button" value="숨기기" id="hide_btn" />
    <input type="button" value="보이기" id="show_btn" />
</div>

 

코드는 위와 같이 간단하게 구현이 가능합니다.

아이디가 hide_btn를 클릭 시 id가 panel인 div를 숨겨라 라는 뜻입니다.

아래는 반대로 보이기 버튼을 클릭시 패널을 보이게 하는 내용입니다.

 

 

숨기기 클릭 시 박스가 숨겨진 상태

 

위 이미지를 보면 잘 동작하는 것을 확인할 수 있습니다.

 

hide 사용방법

$(selector).hide(speed,callback);

 

hide와 show 제이쿼리로 사용할 때 문법은 위와 같습니다.

괄호 안에 아무것도 집어넣지 않으면 바로 사라지고 숫자를 집어넣으면, 안의 밀리초만큼 의 속도로 사라지거나 나타납니다.

 

안에 숫자를 집어넣고 실행해 보겠습니다.

 

$("#hide_btn").click(function() {
    $("#panel").hide(500);
});
$("#show_btn").click(function() {
    $("#panel").show(1000);
});

 

hide에는 500의 값을 show에는 1000의 값을 넣어보겠습니다.

 

사라지고 나타나는 속도 조절

 

 

사라지는 것과 나타나는 속도의 차이가 좀 있는 게 느껴집니다.

또한 hide가 될 때 패널을 감싸고 있는 부모의 크기만큼 이동하면서 사라집니다.

 

 

부모의 크기에 따라 사라지는 것 확인

 

부모의 크기를 작게 만들었더니 그 크기에 맞춰서 사라지는 걸 확인할 수 있습니다.

좀 더 동적인 웹페이지를 만들고 싶다면 hide와 show에 밀리초 속성을 부여하여 움직이는 효과를 줄 수 있겠습니다.

 

jQuery 토글 버튼

보통 숨기고 보이고의 버튼을 나눠서 사용하는 경우는 잘 없습니다.

그러면 버튼 하나만 누르면 숨기고 보이고 둘 다 가능하게 방법을 찾아보겠습니다.

 

굳이 조건문을 추가하지 않아도 jQuery 한 줄이면 간단하게 해결이 가능합니다.

 

<script type="text/javascript">
    $(document).ready(function() {
        $("#button").click(function() {
            $("#panel").toggle();
        });
    });
</script>

<div id="button" class="box" style="background:#365CA1; color:white; cursor: pointer;">
    클릭으로 패널을 숨기거나 표시하기
</div>
<div id="panel" class="box" style="height:100px; line-height: 85px;">
    패널 표시 | 한번 더 클릭시 패널 숨김
</div>

 

코드는 위와 같습니다.

버튼을 눌렀을 때 패널을 토글 시키는 건데 표시되어 있는 것은 숨김처리가 되고, 숨김처리가 된 것들은 다시 표시가 되는 형식입니다.

 

toggle 사용방법

$(selector). toggle(speed, callback);

 

hide와 show와 마찬가지로 toggle의 문법도 똑같습니다.

괄호 안에 숫자를 넣으면 똑같이 속도를 조절할 수 있습니다.

 

토글 작동화면

 

버튼 하나만 눌러도 hide, show 처리되는 것을 확인할 수 있습니다.

토글은 유용하게 사용이 가능합니다.

hide show 뿐만 아니라 특정 버튼을 클릭 시 발생하는 이벤트도 토글을 통해서 처리가 가능합니다.