로그인 & 회원가입 페이지

이제 로그인 중인지, 회원가입 중인지 상황에 맞게 각 요소들을 숨겼다, 드러냈다 하는 기능을 만들어봅시다. Bulma에서는 is-hidden이라는 클래스를 이용해서 요소를 숨길 수 있습니다.

CSS로는 아래와 같이 정의되어있어요.
.is-hidden {
display: none!important;
}

이 클래스를 로그인 화면에서 숨겨야하는 요소들에 붙여주세요.
이제 숨겨져 있으면 드러내고, 드러나 있으면 숨겨주는 함수를 만들어야겠죠? 우선 sign-up-box div에 적용시켜보겠습니다.

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

더 추가하면,
function toggle_sign_up() {
$("#sign-up-box").toggleClass("is-hidden")
$("#div-sign-in-or-up").toggleClass("is-hidden")
$("#btn-check-dup").toggleClass("is-hidden")
$("#help-id").toggleClass("is-hidden")
$("#help-password").toggleClass("is-hidden")
$("#help-password2").toggleClass("is-hidden")
}