By: Prem Tiwari | Last Updated: | In: Freebies, Javascript & Ajax, Web Technologies
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> |
Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
