<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
title
>
jQuery UI toggle Method with All effects
</
title
>
<
link
href
=
rel
=
"stylesheet"
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
style
>
.height {
height: 10px;
}
.divClass {
width: 500px;
height: 200px;
}
#btnID {
padding: .4em 1em;
text-decoration: none;
}
#container {
width: 250px;
height: 180px;
padding: 0.5em;
position: relative;
}
#container h4 {
margin: 0;
padding: 0.3em;
text-align: center;
}
</
style
>
<
script
>
$( function() {
// Toggle the selected effect
// type by the user
function toggleEffect() {
var effectType = $( "#typesOfEffectId" ).val();
// Toggle the effect with call back
$( "#container" ).toggle( effectType, 800);
};
// Set effect from select menu value
$( "#btnID" ).on( "click", function() {
toggleEffect();
});
});
</
script
>
</
head
>
<
body
>
<
h1
style
=
"color:green"
>
GeeksforGeeks
</
h1
>
<
b
>
jQuery UI toggle method
with all type of effects
</
b
>
<
div
class
=
"height"
></
div
>
<
div
class
=
"divClass"
>
<
div
id
=
"container"
class
=
"ui-widget-content"
>
<
h4
class
=
"ui-widget-header"
>Toggle</
h4
>
<
p
>
In this tutorial, we are going to
learn about jQuery UI framework
toggle method with different variety
of effects. The type of effect is
selected from combobox menu to get
different toggle effects.
</
p
>
</
div
>
</
div
>
<
br
/>
<
select
name
=
"effectTypes"
id
=
"typesOfEffectId"
>
<
option
value
=
"blind"
>Blind</
option
>
<
option
value
=
"clip"
>Clip</
option
>
<
option
value
=
"drop"
>Drop</
option
>
<
option
value
=
"explode"
>Explode</
option
>
<
option
value
=
"fade"
>Fade</
option
>
<
option
value
=
"fold"
>Fold</
option
>
<
option
value
=
"highlight"
>Highlight</
option
>
<
option
value
=
"puff"
>Puff</
option
>
<
option
value
=
"shake"
>Shake</
option
>
<
option
value
=
"bounce"
>Bounce</
option
>
<
option
value
=
"slide"
>Slide</
option
>
</
select
>
<
button
id
=
"btnID"
class
=
"ui-state-default"
>
Toggle Effect
</
button
>
</
body
>
</
html
>