Using element.classList.toggle() method in TypeScript (with examples)

The element.classList.toggle() method in TypeScript provides a streamlined approach for adding or removing a class from an element’s class list based on its presence. This tutorial delves into its practical applications through various examples, demonstrating how to effectively manipulate elements’ class attributes.

Introduction

Manipulating an element’s class attribute is a foundational aspect of dynamic web development, allowing developers to change an element’s style and behavior. The element.classList.toggle() method brings simplicity and power to this task, especially when used within TypeScript’s type-safe environment.

Basic Usage

The simplest form of element.classList.toggle() involves toggling a single class name on an element. Consider a webpage with a paragraph element (<p>) that you want to highlight upon user interaction.

// HTML element: <p id='paragraph'>Hello World</p>

// TypeScript code:
document.getElementById('paragraph')?.classList.toggle('highlight');

Adding a ‘highlight’ CSS class might alter the paragraph’s background color. Initially, if the class is not applied, invoking the method adds the class. If the class is already applied, it gets removed.

Conditionally Toggling a Class

To add more control, the toggle() method also accepts a second argument: a boolean value indicating whether to add or remove the specified class. This is particularly useful when dealing with conditional logic.

// Assuming a certain condition is true
let condition = true;
document.getElementById('myElement')?.classList.toggle('active', condition);

This ensures that the ‘active’ class is only added if the condition evaluates to true, providing a clear, concise way to manage class lists based on runtime conditions.

Advanced Use Cases

Going a step further, we can leverage element.classList.toggle() in more complex scenarios, such as in response to user interactions or to implement feature toggles within a web application.

1. Responding to User Clicks

// HTML button: <button id='toggleButton'>Toggle Class</button>
// Target element: <div id='content'>Some Content</div>

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

button.addEventListener('click', () => {
  content.classList.toggle('expanded');
});

Here, clicking the button toggles the ‘expanded’ class on a <div>, dynamically altering the appearance based on the user’s action.

2. Implementing Feature Toggles

// Simulating feature toggle logic
let featureEnabled = false;

// Controlling feature visibility
const featureElement = document.getElementById('feature');
featureElement?.classList.toggle('hidden', !featureEnabled);

This example demonstrates how element.classList.toggle() can be used to easily implement feature toggles, enabling or disabling sections of a web application based on configuration or user preferences.

3. Dynamic Theme Switching

// Button to switch themes: <button id='themeSwitcher'>Switch Theme</button>

const themeSwitcher = document.getElementById('themeSwitcher');
const body = document.body;

themeSwitcher.addEventListener('click', () => {
  body.classList.toggle('dark-theme');
  // Additional logic can be added here to handle themes persistently
});

This example showcases a practical use case of toggling class names to switch between light and dark themes in a web application, enhancing user experience by offering visual customization options.

Conclusion

The element.classList.toggle() method in TypeScript is a versatile tool for manipulating an element’s class list. From simple toggle operations to more complex use cases involving conditional logic and user interactions, it offers a straightforward and effective approach to dynamically adjusting the styling of web elements. By understanding and applying the examples provided, developers can enrich user interfaces and interactions in their web applications.