javascript - How to show or hide the heading in php -
hi need hide text once click on add button , form should displayed.here code.
<h2 style="font-size: 2em; margin-bottom: 0.75em; margin-left: -1%;">specify co-owners self occupied property</h2> <div class="last" style="margin-right: 0; padding-right: 0;"> <div class="last" style="width: 710px;"> <p class="narrate quiet" style="margin-left: 2%; width: 100%;margin-bottom: 0.75em;"> <b>would add co-owner? </b></p> </div> </div> //here add button , go button if click in add button form should displayed else t should show same text.// <div class="span-12 last mt10" style="margin-top:-3%;margin-left:2%;"> <a class="large awesome oranges" >add property co-owner</a> </div> <div class="span-12 last mt10" style="margin-top:-3%;margin-left:51%;"> <a class="large awesome orange" href="property.php">go </a> </div> <p>you haven't added co-owners yet.</p> //my form starts here// <h2>owner property details</h2> <input type='hidden' value="<?php echo $username; ?>" name='email'> <p><label for="name_coowner">coowner name</label> <input id="name_coowner" type="text" name="name_coowner" /></p> <p><label for="pan_coowner">pan of coowner</label> <input id="pan_coowner" type="text" name="pan_coowner" /></p>
if open page iam getting form in owner property details should shown when click on add property owner.remaining other should hidden should show form thats it.
replace code this:
note: requires working internet connection fetching jquery library on internet
<html> <head> <title>title of website</title> <style> .hidden { display:none; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script> <script> $(document).ready(function () { $('.add-property').click(function () { $('.hidden').toggle('slow'); $('#add-owner-div').addclass('hidden'); $('#go-back-div').addclass('hidden'); }); }); </script> </head> <h2 style="font-size: 2em; margin-bottom: 0.75em; margin-left: -1%;">specify co-owners self occupied property</h2> <div class="last" style="margin-right: 0; padding-right: 0;"> <div class="last" style="width: 710px;"> <p class="narrate quiet" style="margin-left: 2%; width: 100%;margin-bottom: 0.75em;"> <b>would add co-owner? </b></p> </div> </div> <div class="span-12 last mt10" style="margin-top:-3%;margin-left:2%;" id="add-owner-div"> <a class="large awesome oranges add-property" >add property co-owner</a> </div> <div class="span-12 last mt10" style="margin-top:-3%;margin-left:51%;" id="go-back-div"> <a class="large awesome orange" href="property.php">go </a> </div> <p>you haven't added co-owners yet.</p> <h2>owner property details</h2> <div class="hidden" style="display:none"> <form> <input type='hidden' value="<?php echo $username; ?>" name='email'> <p><label for="name_coowner">coowner name</label> <input id="name_coowner" type="text" name="name_coowner" /></p> <p><label for="pan_coowner">pan of coowner</label> <input id="pan_coowner" type="text" name="pan_coowner" /></p> </form> </div> </html>
if have other css libraries or bootstrap can include in head tag php not option this. if want php dependent value can use jquery ajax.
Comments
Post a Comment