CSS Classes API

cls.toggle()

Adds the passed CSS classes to the matched DOM elements if they are not already applied, and removes any of the passed CSS classes that are currently present.

  • Accepts arguments as strings, arrays of strings, and an optional boolean value (true or false):
    Argument
    Description
    true
    Adds CSS classes.
    false
    Removes CSS classes.
    You can pass CSS classes as individual arguments, as an array, or as a string separated by commas or spaces.
    Each value is seen as a new argument.
  • Returns a value for a single matched DOM element and a single passed CSS class: true if the passed CSS class is applied, false otherwise.
Example: 
$('body').cls.toggle('book', 'cat');
// Adds the CSS classes 'book' and 'cat' to the <body> element.
// undefined

$('body').cls.toggle('book');
// Removes the CSS class 'book' from the <body> element.
// false

$('body').cls.toggle('book');
// Adds the CSS class 'book' to the <body> element.
// true

$('body').cls.toggle('book', true);
// Adds the CSS class 'book' to the <body> element.
// true

$('body').cls.toggle('book', false);
// Removes the CSS class 'book' from the <body> element.
// false

$('body').cls.toggle('book', 'cat', true);
// Adds the CSS classes 'book' and 'cat' to the <body> element.
// undefined

$('div ?').cls.toggle('book', 'cat');
// Adds the CSS classes 'book' and 'cat' to all <div> elements.
// undefined

$('div ?').cls.toggle(['book', 'cat'], false);
$('div ?').cls.toggle('book, cat');
$('div ?').cls.toggle('book cat', false);
// Removes the CSS classes 'book' and 'cat' from all <div> elements.
// undefined

$('body, div ?').cls.toggle('book');
// Removes the CSS class 'book' from the body element and adds it to all <div> elements.
// undefined
Previous cls.has() Next cls.replace()