YouTip` element.
The `
` element represents a disclosure widget from which the user can obtain additional information or controls on demand. The `ontoggle` event is the standard way to detect when this widget's state changes between open and closed.
---
## Syntax
You can define the `ontoggle` event handler directly in your HTML markup:
```html
```
### Attribute Values
| Value | Description |
| :--- | :--- |
| *script* | The JavaScript code or function to be executed when the event is triggered. |
---
## Technical Details
| Feature | Specification |
| :--- | :--- |
| **Supported HTML Tags** | `
` |
| **DOM Class** | (https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent) (inherits from `Event`) |
| **Bubbles** | No |
| **Cancelable** | No |
---
## Code Examples
### Example 1: Basic Inline Usage
This example triggers a simple JavaScript alert whenever the `
` element is opened or closed.
```html
```
### Example 2: Detecting the Open/Closed State
In real-world applications, you usually need to know whether the element was opened or closed. You can check this by inspecting the `open` property of the `
Click to expand/collapse
This is additional, detailed information that can be toggled.
` element.
```html
```
---
## Browser Support
The numbers in the table specify the first browser version that fully supports the `ontoggle` event attribute.
| Event Attribute | Chrome | Edge | Firefox | Safari | Opera |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **`ontoggle`** | 12.0 | 12.0 | 49.0 | 6.0 | 15.0 |
---
## Key Considerations
1. **HTML5 Standard:** The `ontoggle` attribute and its corresponding `toggle` event were introduced in HTML5 alongside the `
More Information
Here are the technical specifications for the product...
Status: Closed
``` ### Example 3: Using Modern Event Listeners (Recommended) Instead of using the inline `ontoggle` attribute, it is best practice to keep your JavaScript separated from your HTML by using `addEventListener`. ```htmlView Release Notes
Version 2.0.0 includes security patches and performance improvements.
` and `` elements.
2. **No Bubbling:** The `toggle` event does not bubble up the DOM tree. If you want to use event delegation, you must set the `useCapture` parameter to `true` in your event listener.
3. **Triggering Conditions:** The event fires only when the `open` attribute of the `