Objectives and outcomes

In this tutorial we are going to learn about explode and toggle effect in jqueryUI. Explode is visual effect where as Toggle is used to do and undo an effect. Example for the explode effect is shown below observe the effect by clicking on text shown below:



Welcome to codeshot.in !!!



HTML code:

<html>
<head>
<meta charset="utf-8">
<title>jQuery UI effect Example</title>
<link href="jquery-ui.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
</head>
<body>
<div id="content">
<br/>
<h3>Welcome to codeshot.in !!!</h3></div>
</body>
</html>


CSS stylesheet

<style>
#content 
{
height: 100px;
width: 220px;
background: #585858;
color:#fff;
text-align:center;
padding-top:8px;
}
</style>




Javascript

<script>
$(document).ready(function() 
{
$("#content").click(function() 
{
$( "#content" ).effect({
effect: "explode",
pieces: 16,
duration: 1000
});
});
});
</script>


explode effect can be used by specifying explode in the effect argument of effect function other arguments such pieces define the number of pieces into which the content gets broken down.

Now we are going to use the toggle effect with explode effect in the below example



Toggle

We at codeshot are glad to help you!!!



HTML code:

<html>
<head>
<meta charset="utf-8">
<title>jQuery UI effect Example</title>
<link href="jquery-ui.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
</head>
<body>
<div class="content1">
<div id="effect" class="ui-widget-content">
<h3 class="ui-widget-header">Toggle</h3>
<p>
We at codeshot are glad to help you!!!
</p>
</div>
</div>
<a href="#" id="button" class="ui-state-default">Toggle</a>
</body>
</html>


CSS stylesheet

<style>
.content1 
{ 
width: 500px; 
height: 200px; 
}

.ui-widget-header
{
background-color:#585858;
color:#fff;
}
	
#effect 
{ 
width: 240px; 
height: 135px; 
padding: 0.4em; 
position: relative; 
}
	
#effect h3 
{
margin: 0; 
padding: 0.4em; 
text-align: center; 
}
</style>


Javascript

<script>
$(function() 
{
function runEffect() 
{
$( "#effect" ).toggle("explode", 300);
};
$( "#button" ).click(function() 
{
runEffect();
return false;
});
});
</script>


To use the toggle effect we have to use toggle function with some parameters. Here we have used toggle function with 2 parameters one of which is effect and other is for duration. Also we have use ui-widget-header class which is defined in jquery-ui.css file and we can customize it according to our needs.