Toggle class

classList Operations

syntax

el.classList.add(cls)
el.classList.remove(cls)
el.classList.toggle(cls)
el.classList.contains(cls)
el.classList.replace(old, new)

example

const panel = document.querySelector(".panel");

panel.classList.add("visible", "animated");
panel.classList.remove("hidden");
panel.classList.toggle("expanded");

if (panel.classList.contains("visible")) {
  console.log("Panel is visible");
}

panel.classList.replace("animated", "static");

Note classList methods are cleaner and safer than manipulating className directly. toggle() returns true if the class was added, false if removed.

REReact

className Patterns

RE · Styling

syntax

<div className="static-class" />
<div className={dynamicVariable} />
<div className={`base ${condition ? 'active' : ''}`} />

example

function NavLink({ href, isActive, children }) {
  // Template literal approach
  const className = `nav-link ${isActive ? 'nav-link--active' : ''}`;

  return <a href={href} className={className}>{children}</a>;
}

// Helper function for multiple conditional classes
function classNames(...classes) {
  return classes.filter(Boolean).join(' ');
}

function Card({ featured, compact, className }) {
  return (
    <div
      className={classNames(
        'card',
        featured && 'card--featured',
        compact && 'card--compact',
        className
      )}
    >
      {/* ... */}
    </div>
  );
}

Note Use a small classNames helper or the popular 'clsx' package to compose conditional classes cleanly. Avoid complex ternary chains inside className attributes -- extract the logic to keep JSX readable.

JSJavaScript

REReact