How To Jquery Callback Function Examples With Source Code
 |
| JQuery Callback Function Example |
Overview: What You will Need:
You Can Show and Hide Menu Using This Effects. |
| JQuery Callback Function Files Structure |
You will Needs 4 Files:
index.html
style.css
script.js
jquery_latest.js
Note: Put All files In same Folder.
Copy and Paste The Below Codes and Paste on Desired File.
Code For index.html
<!DOCTYPE html>
<html>
<head>
<title>MegaTech24 JQuery Callback function tutorials and Examples With Source Code</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<script src="jquery_latest.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<div id="content_pane">
<h3>SEO Guide</h3>
<p id="shower" class="pane_toggler">Lorem ipsum dolor sit amet, amet coram regis suam non coepit cenam veniebant est in lucem exitum vivit in. Maria cum unde tu bestias terras se ad te finis puellam ad suis alteri si. Manu in lucem exempli paupers coniunx.</p>
<h3>Meditation</h3>
<p class="pane_toggler">Lorem ipsum dolor sit amet, amet coram regis suam non coepit cenam veniebant est in lucem exitum vivit in. Maria cum unde tu bestias terras se ad te finis puellam ad suis alteri si. Manu in lucem exempli paupers coniunx2.</p>
</div>
</body>
</html>
Code For style.css
body{
font-family:Verdana;
font-size:13px;
}
#content_pane{
width:400px;
margin:0 auto;
overflow:hidden;
border:1px solid #ccc;
border-radius:5px;
padding:10px;
}
h3{
text-align:center;
padding:5px;
background:#ddd;
border:1px solid #ccc;
cursor:pointer;
}
.pane_toggler{
display:none;
}
Code For script.js
$(document).ready(function(){
$('#shower').show();
$('h3').click(function(){
$(this).next().slideUp(500,function(){
var test = $(this).next().next().text();
if(test == ''){
$('#shower').slideDown('slow');
}else{
$(this).next().next().slideDown('slow');
}
});
});
});
Please Comments If You have any Problems.
If You Like This Article Please Like US on Facebook.
Thank You for reading My Article.
No comments:
Post a Comment
Thank You for Your Comment
Note: Only a member of this blog may post a comment.