JavaScript - 자바스크립트 토글

우리가 실제로 집에서 사용하는 스위치랑 동일하다.
거실불을 한 스위치로 켜고 끄고 하는 것과 같이 말이다.

웹브라우저에서는 원하는 걸 공개 / 비공개를 할 수 있다.
처음에는 비공개인데 버튼을 클릭하면 공개로 변경하게 한다는 의미다.
반대로 처음에 공개인데 버튼을 클릭하면 비공개로 변경하게도 된다.

구현할 수 있는 방법은 다양하다. 구글에 검색만 하면 다양한 예제가 나온다.
여기서는 가장 기본적인 방법을 적어보겠다.

<div id="section">
하이~!
</div>

<button onclick="toggle()">버튼</button>


<script>
function toggle() {
    var x = document.getElementById("section");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
</script>

간단하게 설명을 해보겠다.

1. 하이~!를 보여주는 공간을 만들었고 공개로 되어 있다.
2. 버튼을 만들었다.
3. 버튼을 누르면 toggle function이 작동한다.

공개인 상태에서 버튼을 클릭하면 비공개가 되고 다시 버튼을 클릭하면 공개가 된다.
처음에는 이해하기 힘들 수 있는데 직접 여러 번 하면 이해가 된다.

이런 케이스를 응용해서 나중에 조금 더 복잡한 조건을 만들 수도 있을 것이다.