html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<title>toggle</title>
</head>
<body>
<div class='trigger'>
Click me
</div>
<div class='trigger'>
Click me
</div>
<div class='trigger'>
Click me
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
body {
}
.trigger{
color: green;
}
.clicked{
color: red;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
/* jQuery:
$('.trigger').on('click', function(){
$(this).toggleClass('clicked');
});*/
window.onload = function(){
document.querySelectorAll ('.trigger').forEach(el =>
el.onclick = function(){
this.classList.toggle('clicked');
}
)
};
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run