prefer-classlist-toggle.md

prefer-classlist-toggle

📝 Prefer using Element#classList.toggle() to toggle class names.

💼 This rule is enabled in the following configs: ✅ recommended, ☑️ unopinionated.

🔧💡 This rule is automatically fixable by the --fix CLI option and manually fixable by editor suggestions.

Prefer using Element#classList.toggle() instead of conditionally calling classList.add() and classList.remove().

Examples

// ❌
if (element.classList.contains('className')) {
	element.classList.remove('className');
} else {
	element.classList.add('className');
}

// ❌
element.classList.contains('className')
	? element.classList.remove('className')
	: element.classList.add('className');

// ❌
element.classList[element.classList.contains('className') ? 'remove' : 'add']('className');

// ✅
element.classList.toggle('className');

// ❌
if (condition) {
	element.classList.add('className');
} else {
	element.classList.remove('className');
}

// ❌
condition
	? element.classList.add('className')
	: element.classList.remove('className');

// ❌
element.classList[condition ? 'add' : 'remove']('className');

// ✅
element.classList.toggle('className', condition);