jQuery display 속성 여부에 따라 show, hide

css display 속성을 이용해 컨텐츠 영역을 접거나 펼치는 방법 입니다.

if ( $('.box').css('display') === 'none' ) {
  $('.box').show();
} else {
  $('.box').hide();
}

위 코드를 자바스크립트로 변경하면 아래와 같습니다.

var box = document.querySelector('.box');

if ( box.style.display === 'none' ){
  box.style.display = 'block';
} else {
  box.style.display = 'none';
}