Latest web development tutorials

jQuery UI example - switching Class (Toggle Class)

When the animation style changed, according to Class existence and value of switch parameter within the set of matched elements of each element to add or remove one or more Class.

For more information about .toggleClass() details of the methods, see the API documentation .toggleClass () .

.toggleClass () Demo

Click the button to preview effects.

<! Doctype html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI Effects - .toggleClass () Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  .toggler {width: 500px; height: 200px; position: relative;}
  #button {padding: .5em 1em; text-decoration: none;}
  #effect {position: relative; width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid # 000; background: #eee; color: # 333;}
  .newClass {text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#button") .click (Function () {
      $ ( "#effect") .toggleClass ( "NewClass", 1000);
      return false;
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div class = "toggler">
  <Div id = "effect" class = "newClass ui-corner-all">
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
  </ Div>
</ Div>
 
<a href="#" id="button" class="ui-state-default ui-corner-all"> run effects </a>
 
 
</ Body>
</ Html>