toggle 로 짧고 간명하게show/hide 구현

7/8 개발일기

요새는 점점 화면 구현/퍼블리싱으로 일을 많이 하게 되면서, java 보다는 jQuery 를 다룰 일이 더 많아졌다. 

오늘 개발을 진행하다가 접기/펼치기 기능을 구현하는데 얼마 전 후배에게 기능 구현에 대해 알려줬던 일이 떠올랐다. 기본적인 기능이지만 필요한 사람도 있지 않을까 하여 적어본다.

show/hide 기능을 구현하는 데에는 여러가지 방법이 있다. 

아마도 아래처럼 구현하는 사람도 많았을 것이다. (때때로 아래 방법이 필요하기도 하다)

$('#toggle-control').click(function() { 

    if($('#target').hasClass("open")) {

            $('#target').css("display","none");
            $('#target').removeClass("open");

    }else{

            $('#target').css("display","block");

            $('#target').addClass("open");

    }

});

그러나 display 속성만 변경할 때에는 기능 하나 바꾸는 데 저렇게 많은 라인을 할애하는 건 비효율적이다. 사실 아래와 같이 하면 좀 더 간명하게 바꿀 수 있다. 

$('#toggle-control').click(function() { 

    $('#target').toggle();

});

toggle() 기능은 show/hide 기능을 toggle 시킨다.

여기에 슬라이드 액션을 주고 싶다면 slideToggle() 을 사용해도 좋다.

target의 display 속성을 제어하는 건 그렇다쳐도, toggle-control을 클릭했을 때 toggle-control의 이미지를 변경하고 싶다거나 텍스트를 변경하고 싶을 땐 어떻게 할 수 있을까? 이것도 toggle() 로 간단히 해결할 수 있다.

일단 아래와 같이 바꿀 이미지 또는 텍스트에 동일한 name을 부여하고, default로 숨겨져 있어야 하는 부분에는 display:none 을 작성한다.

<span name="toggle-control" >접기</span>

<span name="toggle-control" style="display:none;">펼치기</span>

그리고 아래와 같이 해당 name 의 요소를 toggle 하면 간단하게 구현된다.

$("span[name='toggle-control']").click(function() { 

    $('#target').toggle();

    $("span[name='toggle-control']").toggle();

});