JQuery로 토글 기능 구현하기

토글 기능이란? 한 페이지 안에서 여러 기능을 구현하고 싶을 때 보이지 않던 클래스를 보이게 했다가 다시 보이지 않게 할 수 있습니다. 

 

예를들어 로그인/ 회원가입을 한 페이지 안에서 구현을 하고자 한다면 다음과 같은 요소들을 구현해야 합니다.

이 때, 파란색 요소는 로그인 시 숨기고, 초록색 요소는 회원가입 시 숨겨야 합니다. 주황색인 주황색 도움말 요소들도 회원가입할 때에만 나타나야 합니다. 

 

먼저 로그인 화면에서만 보여야 하는 기능들을 제외한 나머지에는 "is-hidden" 클래스를 적용합니다. Bulma에서는 해당 클래스를 이용해 요소를 숨길 수 있습니다. 

.is-hidden {
    display: none!important;
}

이 클래스를 로그인 화면에서 숨겨야 할 요소에 붙여줍니다. 이제 숨겨져 있으면 드러나고 드러나 있으면 숨겨주는 함수를 구현해야 합니다. 

function toggle_sign_up() {
    if ($("#sign-up-box").hasClass("is-hidden")) {
        $("#sign-up-box").removeClass("is-hidden")
    } else {
        $("#sign-up-box").addClass("is-hidden")
    }
}

위와 같은 형태로 토글을 구현할 수 있습니다. 

 

하지만 여러 개의 요소들에 토글을 적용하려면 코드가 길어지고 복잡해집니다. 이 때, JQuery에서는 위 코드를 그대로 구현해주는 함수가 있습니다. "toggleClass()"입니다.

function toggle_sign_up() {  
    $("#sign-up-box").toggleClass("is-hidden")
}

세 줄짜리 코드가 하나의 코드로 간단하게 구현이 되었습니다.