YouTip

# jQuery UI Example - Toggle Class When animated styles change, add or remove one or more classes from each element in the matched set, depending on whether the class exists and the value of the switch parameter. For more details about the `.toggleClass()` method, please see the API documentation [.toggleClass()](#). ## .toggleClass() Demo Click the button to preview the effect. .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; } $(function() { $( "#button" ).click(function() { $( "#effect" ).toggleClass( "newClass", 1000 ); return false; }); }); Run Effect (#)