자바스크립트에서 Ternary 연산자를 이용한 토글 기능 구현

08 Nov 2023

javascript

// HTML 요소 선택
const toggleButton = document.querySelector('.toggle-btn');
const toggleContent = document.querySelector('.toggle-content');

// 초기 상태 설정
let isOpen = false;

// 토글 버튼 클릭 이벤트 리스너 등록
toggleButton.addEventListener('click', () => {
  // Ternary 연산자를 이용하여 isOpen 상태를 전환
  isOpen = isOpen ? false : true;

  // 텍스트 및 스타일 변경
  toggleContent.textContent = isOpen ? '열림' : '닫힘';
  toggleContent.style.display = isOpen ? 'block' : 'none';
});

위 코드에서는 먼저 HTML 요소를 선택하고, 초기 상태 변수 isOpen 을 false로 설정합니다. 그리고 토글 버튼을 클릭하는 이벤트 리스너를 등록합니다. Ternary 연산자를 이용하여 isOpen의 상태를 전환시킵니다. 변수 isOpen이 true일 때는 ‘열림’이라는 텍스트를, false일 때는 ‘닫힘’이라는 텍스트를 표시하고, 스타일을 변경합니다. 토글 버튼을 클릭할 때마다 상태가 전환되고, 해당 상태에 따라 텍스트와 스타일이 적용되는 토글 기능을 구현합니다.

이렇게 토글 기능을 Ternary 연산자를 이용하여 구현할 수 있습니다. 추가적으로 CSS 스타일을 이용하여 디자인을 변경할 수도 있습니다.

참고 자료:

Ternary Operator in JavaScript