[jQuery] 클래스 토글(Class Toggle) 기능

Bulma를 이용하면 is-hidden 이라는 클래스를 사용하여 요소를 숨길수 있다.

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

 

1. 숨겨져 있으면 드러나고, 드러나 있으면 숨겨주는 함수를 정의한다.(ex. class = 'sign-up-box')

2. 스크립트에 hasclass라는 메서드를 통해 상태를 확인하고 해당 클래스가 있으면 클래스 삭제 없으면 클래스 추가 기능을 만든다.

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")
}