In this article, we will learn jQueryUI. This is the second part of this article series of jQueryUI. In this part, we will learn about jQuery UI toggle method. Toggle method is used to create a hide and show element with different effects.

Prerequisites

Basic knowledge of:

Toggle method

This method is used to toggle the show and hide method. Using this method we can give an element some cool effect. We can show or hide an element based on the effects.
  • Parameters used in Toggle method
  • Duration
  • Effect
  • options

Effect: By using effect we can add animation to elements

Different types of effect

  1. Bounce
  2. Scale
  3. Clip
  4. Explode
Open Visual Studio and create a new project -- rename it as jQuery and download the required Jquery reference file from the jQuery Website or NuGet package manager. Add the reference of the Jquery file into the page's head section. In the body section add the following lines.
  1. <script src="Scripts/jquery-1.10.2.js"></script>
  2. <script src="Scripts/jquery-ui.js"></script>
  3. <link href="Scripts/jquery-ui.css" rel="stylesheet" />

First we learn about scale effect. In Body section add the following lines.

  1. <div id="scal">
  2. <img src="Image/pexels-photo-257360.jpeg" style="height:500px; width:500px" />
  3. </div>
  4. <h3>Click on Image</h3>

Now, add a script tag in the head section and add the following lines to create scale effect.

  1. <script>
  2. $(document).click(function () {
  3. $("#scal").toggle({ effect: "scale", direction: "vertical" });
  4. });
  5. </script>

Complete code

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>scale demo</title>
  6. <script src="Scripts/jquery-1.10.2.js"></script>
  7. <script src="Scripts/jquery-ui.js"></script>
  8. <link href="Scripts/jquery-ui.css" rel="stylesheet" />
  9. <script>
  10. $(document).click(function () {
  11. $("#scal").toggle({ effect: "scale", direction: "vertical" });
  12. });
  13. </script>
  14. </head>
  15. <body style="text-align:center">
  16. <div id="scal">
  17. <img src="Image/pexels-photo-257360.jpeg" style="height:500px; width:500px" />
  18. </div>
  19. <h3>Click on Image</h3>
  20. </body>
  21. </html>

Run the Project and check the browser. Click on image and check the effect.

Explode Effect Demo

Add some style in head section.
  1. <style>
  2. .explod {
  3. width: 600px;
  4. height: 300px;
  5. }
  6. #Explodeffect {
  7. width: 340px;
  8. height: 255px;
  9. }
  10. </style>
Add these lines in body section.
  1. <div class="explod">
  2. <div id="Explodeffect">
  3. <img src="Image/pexels-photo-257360.jpeg" style="height:500px; width:500px" />
  4. lt;/div>
  5. </div>
Now, in head section add a script tag and add the following lines.
  1. <script>
  2. $(document).ready(function () {
  3. $("#Explodeffect").click(function () {
  4. $("#Explodeffect").toggle('explode', 500);
  5. });
  6. });
  7. </script>
Complete code
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Explode demo</title>
  6. <script src="Scripts/jquery-1.10.2.js"></script>
  7. <script src="Scripts/jquery-ui.js"></script>
  8. <link href="Scripts/jquery-ui.css" rel="stylesheet" />
  10. <style>
  11. .explod {
  12. width: 600px;
  13. height: 300px;
  14. }
  15. #Explodeffect {
  16. width: 340px;
  17. height: 255px;
  18. }
  19. </style>
  20. <script>
  21. $(document).ready(function () {
  22. $("#Explodeffect").click(function () {
  23. $("#Explodeffect").toggle('explode', 500);
  24. });
  25. });
  26. </script>
  27. </head>
  28. <body style="text-align:center">
  29. <div class="explod">
  30. <div id="Explodeffect">
  31. <img src="Image/pexels-photo-257360.jpeg" style="height:500px; width:500px" />
  32. </div>
  33. </div>
  34. </body>
  35. </html>
Run the project and click on the image and check the effect,
Click on the image and check the result.

Summary

In this article, we have learned about jQuery UI toggle method.