JAVASCRIPT
Toggle CSS Classes to Manage UI States
Efficiently add, remove, or toggle CSS classes on DOM elements to change their appearance or behavior in response to user interactions or application state.
function toggleActiveClass(elementId, className = 'active') {
const element = document.getElementById(elementId);
if (element) {
element.classList.toggle(className);
console.log(`Toggled '${className}' class on #${elementId}. Current classes:`, element.className);
} else {
console.error(`Element with ID '${elementId}' not found.`);
}
}
function addClass(elementId, className) {
const element = document.getElementById(elementId);
if (element) {
element.classList.add(className);
console.log(`Added '${className}' class to #${elementId}. Current classes:`, element.className);
}
}
function removeClass(elementId, className) {
const element = document.getElementById(elementId);
if (element) {
element.classList.remove(className);
console.log(`Removed '${className}' class from #${elementId}. Current classes:`, element.className);
}
}
// Example Usage:
// HTML structure: <button id="myButton" class="btn">Click Me</button>
// CSS: .active { background-color: lightblue; border: 2px solid blue; }
// .highlight { color: red; font-weight: bold; }
// On click, toggle the 'active' class
document.getElementById('myButton').addEventListener('click', () => {
toggleActiveClass('myButton');
// Also add/remove another class
if (document.getElementById('myButton').classList.contains('active')) {
addClass('myButton', 'highlight');
} else {
removeClass('myButton', 'highlight');
}
});
// Initial setup example (could be on page load)
addClass('myButton', 'initial-style'); // Assuming initial-style exists in CSS
How it works: This snippet provides functions to manipulate an element's CSS classes, which is fundamental for changing UI states (e.g., active, selected, hidden). It leverages the `classList` API (`add`, `remove`, `toggle`), a modern and convenient way to manage classes compared to directly manipulating `element.className`. The `toggleActiveClass` function is particularly useful for switching states, while `addClass` and `removeClass` allow for precise control over an element's visual presentation based on dynamic conditions.