Toggle CSS Class on Element Click

document.addEventListener('DOMContentLoaded', () => {
  const toggleButton = document.getElementById('myToggleButton');
  const targetElement = document.getElementById('myTargetElement');

  if (toggleButton && targetElement) {
    toggleButton.addEventListener('click', () => {
      targetElement.classList.toggle('active');
      console.log(`Class 'active' on target element: ${targetElement.classList.contains('active') ? 'added' : 'removed'}`);
    });
  }
});

How it works: This snippet demonstrates how to dynamically add or remove a CSS class from an element using the `classList.toggle()` method. When the button with ID 'myToggleButton' is clicked, the 'active' class is either added to or removed from the 'myTargetElement'. This is a very common pattern for creating interactive UI elements like menus, modals, or accordion sections, where a visual state change is required based on user interaction. The `DOMContentLoaded` event ensures the script runs only after the entire HTML document has been loaded and parsed.