beginner

Toggle CSS Class

Add and remove CSS classes from elements.

Learn the classList API for dynamic styling.

📚 Concepts & Theory

classList

element.classList.toggle('active');
element.classList.add('visible');
element.classList.remove('hidden');

🎯 Your Challenge

Write a function to toggle the \"active\" class.

📝 Starter Code

JavaScript

// HTML: <button id="btn">Click me</button>

function toggleActive() {
  // Your code here
}

Solution

JavaScript

function toggleActive() {
  const btn = document.getElementById('btn');
  btn.classList.toggle('active');
}

document.getElementById('btn').onclick = toggleActive;

Explanation

classList.toggle switches the class on/off.

❓ Frequently Asked Questions

Adds class if missing, removes if present