Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML ontoggle Event Attribute
The HTML ontoggle event attribute is triggered when a user opens or closes a <details> element. This event fires whenever the element's open attribute is added or removed, making it useful for creating interactive collapsible content sections.
Syntax
Following is the syntax for the ontoggle event attribute −
<details ontoggle="script"> <summary>Summary text</summary> Content to toggle </details>
Where script is the JavaScript function or code to execute when the details element is toggled.
Parameters
The ontoggle attribute accepts the following parameter −
script − JavaScript function or inline code that executes when the toggle event occurs. This can be a function call like
myFunction()or inline JavaScript code.
How It Works
The ontoggle event is fired in two scenarios −
Opening − When the user clicks the summary to expand the details content
Closing − When the user clicks the summary to collapse the details content
The event also triggers when the open attribute is programmatically added or removed via JavaScript using setAttribute() or removeAttribute().
Example − Basic Toggle Event
Following example demonstrates the basic usage of the ontoggle event attribute −
<!DOCTYPE html>
<html>
<head>
<title>HTML ontoggle Event Attribute</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f0f0f0;
}
details {
background: white;
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
}
summary {
cursor: pointer;
font-weight: bold;
padding: 5px;
}
</style>
</head>
<body>
<h1>HTML ontoggle Event Attribute Demo</h1>
<details ontoggle="toggleAlert()">
<summary>Click to Toggle Content</summary>
<p>This content is revealed when you expand the details element. The ontoggle event fires each time you open or close this section.</p>
</details>
<script>
function toggleAlert() {
alert('Details element has been toggled!');
}
</script>
</body>
</html>
Each time the details element is opened or closed, an alert message appears confirming the toggle action.
Example − Dynamic Styling on Toggle
Following example shows how to change the page appearance when the details element is toggled −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Styling with ontoggle</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
color: #000;
text-align: center;
transition: all 0.3s ease;
}
details {
background: rgba(255,255,255,0.9);
border-radius: 10px;
padding: 15px;
margin: 20px auto;
max-width: 500px;
}
summary {
cursor: pointer;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>HTML ontoggle Event Attribute Demo</h1>
<details ontoggle="changeStyle()">
<summary>Hi! I'm summary element</summary>
<p>This is a paragraph with some content. Notice how the background changes when you toggle this section.</p>
</details>
<script>
let isToggled = false;
function changeStyle() {
if (!isToggled) {
document.body.style.background = "linear-gradient(45deg, #8BC6EC 0%, #9599E2 100%)";
document.body.style.color = "#fff";
isToggled = true;
} else {
document.body.style.background = "linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)";
document.body.style.color = "#000";
isToggled = false;
}
}
</script>
</body>
</html>
The background gradient and text color change each time the details element is toggled, creating a dynamic visual effect.
Example − Counter with Toggle Event
Following example demonstrates counting how many times the details element has been toggled −
<!DOCTYPE html>
<html>
<head>
<title>Toggle Counter Example</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 600px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
details {
border: 2px solid #007bff;
border-radius: 5px;
padding: 10px;
margin: 15px 0;
}
#counter {
font-size: 18px;
font-weight: bold;
color: #007bff;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>Toggle Counter Demo</h1>
<p id="counter">Toggle count: 0</p>
<details ontoggle="incrementCounter()">
<summary>FAQ: What is HTML5?</summary>
<p>HTML5 is the latest version of HTML (HyperText Markup Language) that includes new semantic elements, multimedia support, and improved APIs for web development.</p>
</details>
</div>
<script>
let count = 0;
function incrementCounter() {
count++;
document.getElementById('counter').textContent = 'Toggle count: ' + count;
}
</script>
</body>
</html>
The counter increments each time the details element is opened or closed, providing feedback on user interaction.
Browser Compatibility
The ontoggle event attribute is supported in modern browsers that support the HTML5 <details> element. This includes −
Chrome 12+
Firefox 49+
Safari 6+
Edge 79+
Internet Explorer does not support the <details> element and therefore does not support the ontoggle event.
Conclusion
The HTML ontoggle event attribute provides a simple way to execute JavaScript code when a <details> element is expanded or collapsed. It enables developers to create interactive content sections with custom behaviors, making it useful for FAQ sections, collapsible menus, and dynamic user interfaces.
237 Views
