The toggle
event fires when the open
/closed
state of a <details>
element is toggled.
Bubbles | No |
---|---|
Cancelable | No |
Interface | Event |
Event handler property | None |
Default Action | Toggles the open state of the <details> element. |
Examples
This example logs chapters that are open. Chapters are removed from the log when they are closed.
HTML
<aside id="log"> <b>Open chapters:</b> <div data-id="ch1" hidden>I</div> <div data-id="ch2" hidden>II</div> <div data-id="ch3" hidden>III</div> </aside> <section id="summaries"> <b>Chapter summaries:</b> <details id="ch1"> <summary>Chapter I</summary> Philosophy reproves Boethius for the foolishness of his complaints against Fortune. Her very nature is caprice. </details> <details id="ch2"> <summary>Chapter II</summary> Philosophy in Fortune's name replies to Boethius' reproaches, and proves that the gifts of Fortune are hers to give and to take away. </details> <details id="ch3"> <summary>Chapter III</summary> Boethius falls back upon his present sense of misery. Philosophy reminds him of the brilliancy of his former fortunes. </details> </section>
CSS
body { display: flex; flex-direction: row-reverse; } #log { flex-shrink: 0; padding-left: 3em; } #summaries { flex-grow: 1; }
JavaScript
function logItem(e) { const item = document.querySelector(`[data-id=${e.target.id}]`); item.toggleAttribute('hidden'); } const chapters = document.querySelectorAll('details'); chapters.forEach((chapter) => { chapter.addEventListener('toggle', logItem); });
Result
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'toggle event' in that specification. |
Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
toggle event | Chrome Full support Yes | Edge Full support ≤79 | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown