jQuery UI Toggle

by Online Tutorials Library July 14, 2022

jQuery UI toggle

The jQuery toggle() method is used to toggle the show() or hide() method depending on whether the element is hidden or not.

Syntax:

Parameters of toggle method:

Effect:This parameter specifies the effects which are used for transition.
Options: This is used for specifying the specific setting and easing for the effects. Each effect has its own set of options.
Duration:This specifies the time duration and indicates the number of milliseconds of the effect. Its default value is 400.
Complete:It is a callback method. It is called for each element when the effect is completed for the elements.

jQueryUI toggle example

Let’s take an example of jQueryUI toggle() method with explode effect:

 <!doctype html> <html lang=”en”>    <head>       <meta charset=”utf-8″>       <title>jQuery UI Toggle Example</title>       <link href=”https:://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css” rel=”stylesheet”>       <script src=”http://code.jquery.com/jquery-1.10.2.js”></script>       <script src=”http://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>       <!– CSS –>       <style>          .toggler { width: 500px; height: 200px; }          #button { padding: .5em 1em; text-decoration: none; }          #effect { width: 240px; height: 155px; padding: 0.4em; position: relative; }          #effect h3 { margin: 0; padding: 0.4em; text-align: center; }       </style>       <script>          $(function() {             function runEffect() {                $( “#effect” ).toggle(‘explode’, 300);             };             $( “#button” ).click(function() {                runEffect();                return false;             });          });       </script>    </head>    <body>       <div class=”toggler”>       <div id=”effect” class=”ui-widget-content ui-corner-all”>          <h3 class=”ui-widget-header ui-corner-all”>Toggle</h3>          <p>          tutoraspire provides easy and point to point learning of various tutorials such as          Java Tutorial, Core Java Tutorial, Android, Design Pattern, JavaScript, AJAX, SQL, Python etc.          </p>       </div>       </div>       <a href=”#” id=”button” class=”ui-state-default ui-corner-all”>Togglemethod with explode effect</a>    </body> </html> 

Test it Now

Next TopicjQuery UI addClass

jQuery UI Toggle

jQuery UI toggle

jQueryUI toggle example

Create and Manage Users in Jenkins

Laravel Middleware

You may also like