Sunday 12 May 2013
Facebook StumbleUpon Twitter Google+ Pin It

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. 

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 
}


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>


Parthiv Patel
Bhaishri Info Solution
Sr. PHP Developer
Limdi Chowk, AT PO. Nar, Di. Anand
Nar, Gujarat
388150
India
pparthiv2412@gmail.com
7383343029
DOB: 12/24/1986

No comments: