Toggle Classes
Add and remove CSS classes dynamically
Toggle classes to create interactive UI elements with smooth transitions and visual feedback.
toggle
classes
CSS
Click the button!
The Code
<div id="box" class="demo-box">
Click the button!
</div>
<button _="on click toggle .active on #box">
Toggle Active State
</button>
.demo-box.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
transform: scale(1.1) rotate(5deg);
}
How it works:
toggle .active - Adds or removes the "active" classon #box - Targets the element with id="box"- CSS transitions create smooth animations automatically
Other Toggle Commands:
add .className - Add a class (if not present)remove .className - Remove a class (if present)toggle .className - Add if absent, remove if presenttoggle between .class1 and .class2 - Swap classes
Try it yourself:
- Add multiple classes:
toggle .active .highlighted
- Toggle on the element itself:
toggle .active on me
- Target multiple elements:
toggle .active on .demo-box