HTML, JavaScript, jQuery : HTML Element을 Show/Hide Toggle : 방법, 예제, 구현

HTML, JavaScript, jQuery : HTML Element을 Show/Hide Toggle : 방법, 예제, 구현

 

다음은 컨텐츠를 표시하거나 숨길 수있는 다른 방법입니다.

 

 

 

Javascript

HTML 엘리먼트의 ID가 전달되는 원시 Javascript를 사용하는 함수입니다. 그런 다음 getElementById 함수를 사용하여 엘리먼트를 가져옵니다. 이제 현재 스타일이 무엇인지 볼 수있는 엘리먼트가 있습니다. none으로 설정되면 block으로 설정하고 block으로 설정하면 none으로 설정합니다. 표시와 숨기기를 전환하려면 ID로 이 함수를 호출합니다.

 

function toggle_div(id) {
     var e = document.getElementById(id);
     e.style.display = ((e.style.display!='none') ? 'none' : 'block');
}

 

 

 

자바스크립트 함수 사용법

원시 Javascript 또는 jQuery를 사용하려는 함수를 선택할 수 있지만 같은 방식으로 호출할 수 있습니다.

 

<a href="#" onclick="toggle_div('toggleDiv');">Click here to toggle the div between show or hide.</a>
<div id="toggleDiv">This is toggle div</div>

 

 

 

jQuery

위의 jQuery 버전은 jQuery 함수를 포함합니다. 위의 jQuery 사용 방법을 보여주는 토글 메소드를 호출하여 위의 작업을 수행할 수 있습니다.

 

$('.toggleDiv').on('click', function(){
    this.next().toggle();
});

 

 

 

jQuery 함수 사용법

jQuery 함수를 사용하려면 링크 바로 뒤에 div가있는 toggleDiv 클래스가 있어야합니다.

 

<a href="#" class="toggleDiv">Click here to toggle the div between show or hide.</a>
<div>This is toggle div</div>