Google Choice: JqueryUI

Wednesday, March 1, 2017

JqueryUI - Toggle Class

This chapter will discuss the toggleClass() method, which is a useful new class for manipulation. toggleClass() method adds or removes one or more classes from each element in the set of matched elements.

Syntax

Added in Version 1.0 of jQueryUI

The toggleClass() method has its basic syntax as follows −

.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )

Sr.No.	Parameter & Description
1	className This is a String and represents the CSS class name, or space-delimited list of class names, to be added, removed, or toggled.
2	switch This is of type Boolean and if specified, forces the toggleClass() method to add the class if true, or to remove the class if false.
3	duration This is of type Number or String and optionally provides one of slow, normal, fast, or the duration of the effect in milliseconds. If omitted, the animate() method determines the default. Its default value is 400.
4	easing The name of the easing function to be passed to the animate() method.
5	complete This is a callback method called for each element when the effect is complete for this element.

Added In Version 1.9 of jQueryUI

With version 1.9, this method now supports a children option, which will also animate descendant elements.

.toggleClass( className [, switch ] [, options ] )

Sr.No.	Parameter & Description
1	className This is a String and represents the CSS class name, or space-delimited list of class names, to be added, removed, or toggled.
2	switch This is of type Boolean and if specified, forces the toggleClass() method to add the class if true, or to remove the class if false.
3	options This represents all animation settings. All properties are optional. Possible values are − duration − A string or number determining how long the animation will run.. Its default value is 400. easing − A string indicating which easing function to use for the transition. Its default value is swing. Possible values are here. complete − This is a callback method called for each element when the effect is complete for this element. children − This is a Boolean and represents whether the animation should additionally be applied to all descendants of the matched elements. queue − This is of type String/Boolean indicating whether to place the animation in the effects queue.

Examples

The following example demonstrates the use of toggleClass() method.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Switch Class Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .class1 {
            border-width : 10px;
            border-color : grey;
            background-color : #cedc98;
            color : black;
         }
      </style>
      
      <script>
         function toggle () {
            $("#para").toggleClass ("class1", 1000);
         }
      </script>
   </head>
   
   <body>
      <button onclick = toggle()> Toggle </button>
      <p id = "para" style = border-style:solid> Welcome to Tutorials Point </p>
   </body>
</html>

Let us save the above code in an HTML file toggleclassexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −
Click on the Toggle button to see how the CSS classes are changeed for the text.

পৃষ্ঠাসমূহ

Labels

.

Search Your Article

Total Pageviews