JavaScript/jQuery | show()와 hide()로 토글 기능 만들기

 

🍙 요구사항 (Requiredments)

 

매개변수로 받은 값에 따라서 요소를 보여줬다 감췄다 하려고 합니다. toggle() 을 사용할 수 있지만, show()와 hide()를 이용한 방법을 사용하려고 합니다.

 

 

🥡 해결방안 (Solution or Next step)

 

HTML과 JavaScript로 사용했으며, onclick 이벤트를 사용해서 매개변수 값에 따라 요소를 보여줬다가, 감춰줍니다.

 

 

HTML

<ul>
    <li>
        <a href="javascript:void(0)" onclick="showAndHide('N')">HIDE</a>
    </li>
    <li>
        <a href="javascript:void(0)" onclick="showAndHide('Y')">SHOW</a>
    </li>
</ul>

 

<span class="showElement" style="display: none;">

 

JavaScript

function showAndHide(markYn) {
    if (markYn === 'Y') {
        $('.showElement').show();
    } else {
        $('.showElement').hide();
    }
}

 

 

🍤 회고 (Retrospective)

 

toggle()을 사용하지 않고 같은 효과를 줄 수 있는 기능을 정리해 보았습니다. 가끔 생각이 나지 않을 때 검색해서 찾아볼 때가 있을 때 필자도 확인하러 올 용도로 기록했습니다.

 

피드백에 따라 본 글에 설명이 추가될 수 있습니다.

 

 

🍥 참고자료 (References)

• jQuery, ".show()", https://api.jquery.com/show/, (2021.11.13.)
• jQuery, ".hide()", https://api.jquery.com/hide/, (2021.11.13.)