Hide and Seek with jQuery.
Wall Script
Tuesday, July 28, 2009

Hide and Seek with jQuery.

This tutorial about Hide and Seek with jQuery and PHP. This script helps you to present all modules in single page. Take a look at live demo click buttons


Download Script     Live Demo

Javascript Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js
"></script>
<script type="text/javascript">
$(function()
{

$(".button").click(function()
{
var button_id = $(this).attr("id");

//Add Record button
if(button_id=="add")
{
$("#results").slideUp("slow");
$("#save_form").slideDown("slow");
}

//Cancel button
else if(button_id=="cancel")
{
$("#save_form").slideUp("slow");
$("#results").slideDown("slow");
}

// save button
else
{
// insert record
// more details Submit form with jQuery
}

return false;
});
});
</script>



HTML Code
Contains javascipt code. $(".button").click(function(){}- button is the class name of buttons(Add, Save and Cancel). Using $(this).attr("id") calling button id value.
<div id="results" >

<a href="#" class="button" id="add" >Add Record </a>
</div>

<div id="save_form" style="display:none" >

<a href="#" class="button" id="save" >Save </a>
<a href="#" class="button" id="cancel" >Cancel </a>
</div>

<div id="update" >

</div>
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


3 comments:

Make in India