In this tutorial i explained in Hide and Seek with jQuery and PHP. This script helps you to present all modules in single page. The optional callback parameter is a function to be executed after the hide() or show() method completes (you will learn more about callback functions in a later chapter).
Javascript Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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> |
If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.
Article Tags: Jquery
