HTML5 deatils태그 onToggle 속성

Posted by Hide­
2018.01.31 16:47 Coding/HTML & Javascript

HTML5에 details태그가 추가되었다.

간단하게 추가적인 정보를 표시할 때 상당히 유용하게 쓸 수 있을 것 같다.

기본적인 틀은 아래와 같다.


<details> 

<summary>제목</summary> 

<p>추가적인 내용</p> 

</details> 


위와 같이 작성하면 아래와 아래와 같이 맨 왼쪽에 화살표가 추가된 형태로 나온다.


여기서 화살표를 눌러보면 추가적인 내용이라고 쓴 부분이 나온다.


다시 화살표를 누르면 없어진다.

여기서 details태그의 속성으로 onToggle 속성을 줄 수 있다.

해당 속성은 화살표가 클릭될 때 마다 발생하는 이벤트를 지정해줄 수 있다.


<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

<script>

var test = () => {

    alert("toggle");

    }

</script>

</head>

<body>


<details onToggle=test()> 

<summary>제목</summary> 

<p>추가적인 내용</p> 

</details> 


</body>

</html>


참고로 => 는 ES6부터 지원되는 화살표 함수(Arrow function) 이다. 

var test = () => {

alert("toggle");


위 함수를 ES5 스타일로 바꿔보면 아래와 같다.


function test() {

alert("toggle");

}


이렇게 작성을 하면 화살표를 클릭할때마다 test함수가 실행된다.



onToggle속성은 details 태그 뿐만 아니라 다른 태그의 속성으로도 줄 수 있다.

자세한 내용은 아래 주소 참고.


details : https://www.w3schools.com/tags/tag_details.asp

onToggle : https://www.w3schools.com/jsref/event_ontoggle.asp



다른 사람들이 많이 읽은 글
이 댓글을 비밀 댓글로

티스토리 툴바