HTML Reference Manual

HTML tag大全

HTML ontoggle event attribute

Online Example

Execute JavaScript when the <details> element is opened or closed:

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML ontoggle event attribute usage (Basic Tutorial Website oldtoolbag.com)<//title>
<style>
div {
　　background: yellow;
　　border:　1px solid #cccccc;
　　padding:　10px;
}
</style>
</head>
<body>
<p>Open the details./p>
<details ontoggle="myFunction()">
<summary>Copyright　1999-2019.</summary>
<p>　-　All rights reserved./p>
<p>The detailed content and paragraphs are displayed here.../p>
</details>
<p><strong>Note:</The ontoggle event attribute is supported by Chrome and Safari　6+, and Opera　15+.</p>
<script>
function myFunction() {
　　alert("ontoggle event triggered");
}
</script>
</body>
</html>

Test and See ‹/›

Definition and Usage

When the user opens or closes the <details> element, the ontoggle attribute is triggered.
The <details> element specifies additional details that the user can view or hide as needed.

Browser Compatibility

IEFirefoxOperaChromeSafari

HTML 4.01 with HTML5 differences

In HTML5In, the ontoggle attribute is newly added.

Syntax

<element ontoggle="script">

Attribute Value

Value	Description
script	Script is executed in ontoggle

Technical Details

Supported HTML Tags:	<details>

HTML DOM Reference Manual: ontoggle Event

HTML Event Attributes

HTML: <template> tag