Toggle Classes Based on Conditions

Use classList.toggle to add or remove classes based on a condition.

const button = document.getElementById('toggleButton');

button.addEventListener('click', () => {
    const element = document.querySelector('.dynamic-element');
    element.classList.toggle('active', element.textContent.includes('Activate'));
});

If the text content of element includes 'Activate', the class 'active' is added.

If the text content does not include 'Activate', the class 'active' is removed.

element.classList.toggle('active', element.textContent.includes('Activate'));

element.textContent.includes('Activate'): This condition checks if the text content of the element contains the word 'Activate'.

element.classList: Provides access to the list of classes on the element.

You Might Also Like

Arrow Functions

### 1. Basic Syntax ``` const add = (a, b) => a + b; ``` ### 2. Single Parameter ``` const greet =...

Learn More
Functions : Declaration, Expression, IIFE, Callback and More

### 1. Function Declaration ``` function greet(name) { return `Hello, ${name}!`; } ``` ### 2. F...

Learn More