user5891511 February 2016

How to show or hide the heading in php

Hi i need to hide the text once i click on add button and the form should be displayed.Here is my code.

<h2 style="font-size: 2em; margin-bottom: 0.75em; margin-left: -1%;">Specify Co-Owners for 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 you like to add Co-owner? </b></p>
    </div>
</div>

//Here is add button and go back button if i click in this add button form should be displayed else t should show the same text.//

<div class="span-12 last mt10" style="margin-top:-3%;margin-left:2%;">
    <a class="large awesome oranges"  >Add a 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 Back </a>
</div>

<p>You haven't added any Co-owners Yet.</p>

//My form starts from 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 i open the page iam getting this form but in this Owner Property details should be shown only when i click on add a property owner.Remaining all other should be Hidden it should show only form thats it.

Answers


Sahil Gulati February 2016

Replace your code with this:
Note:
This requires a working internet connection for fetching JQuery library over 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 for 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 you like to 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 a 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 Back </a>
    </div>
    <p>You haven't added any 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'> 


RIYAJ KHAN February 2016

Your add button should be like this

<a class="large awesome oranges"  id="add_btn">Add a property Co-owner</a> 

Put your form elements inside form

<form nam="myform" id="myform"  style="display:none">

<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>

Js:

$("#add_btn").on('click',function(){

$("#myform").show();
}

Post Status

Asked in February 2016
Viewed 2,284 times
Voted 7
Answered 2 times

Search




Leave an answer