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
'Coding > HTML' 카테고리의 다른 글
| 동적으로 추가한 요소 이벤트 동작하지 않을때 해결방법 (0) | 2017.04.06 |
|---|---|
| Jquery empty() / remove() / detach() 차이점 (0) | 2017.04.05 |
| [W3Schools AngularJS 한글강좌] Directives (0) | 2017.01.16 |
| [W3Schools AngularJS 한글강좌] Modules (0) | 2017.01.16 |
| [W3Schools AngularJS 한글강좌] Expressions (0) | 2017.01.16 |
