Hiding and Displaying div tag content in real time using Jquery.

Hi Viewers,

This article describes about hiding and displaying the division tags using JQuery with out any postback to the page.
There are many situations you need to hide the div(block of code) in the real time and This can be achieved using JQuery.
This example demonstrate the three scenarios of registering user.

1. Register Directly.
2. Register Via Facebook Account.
3. Register Via Gmail Account.

Download the example from the below link and debug it. This kind of examples are commonly used in any web application and it is very helpful interview question.

Download Link:  Hiding and Displaying div tag Content in real time using Jquery.

Make this Page as Start-up Page: HidingandDisplayingDiv.aspx 

Apart from that it also includes the other example: Real Time ASP.Net Dropdown Binding implementation in web application

ReferenceLink: http://realtimeaspdotnet.blogspot.in/2013/09/real-time-aspnet-dropdown-binding.html

Register Directly

Register With Facebook Account

Register With Gmail Account

Generated Output

In order to get the above result:

• Create 3 radio buttons by specifying the group name.
• Create three <div> blocks with unique id.
• In the above Example there are three <div> with unique Ids
• <div id="RegisterDiv" style="float: left; width: 100%; display: none; margin-top: 10px;" >
•    <div id="RegisterFacebookDiv" style="float: left; width: 100%; display: none; margin-top: 10px;">
•  <div id="RegisterGmailDiv" style="float: left; width: 100%; display: none; margin-top: 10px;">
• For each radio button specify the onclick="Register('RegisterGmail');"  function and implement the Register method in java script.
• Place All the controls in <divs> that needs to be rendered on the page.

   <script lang="javascript" type="text/javascript">
        function Register(value) {
            if (value == "Register") {
                $("#RegisterDiv").css('display', 'block');
                $("#RegisterFacebookDiv").css('display', 'none');
                $("#RegisterGmailDiv").css('display', 'none');

            }
            else if (value == "RegisterFacebook") {
                $("#RegisterDiv").css('display', 'none');
                $("#RegisterFacebookDiv").css('display', 'block');
                $("#RegisterGmailDiv").css('display', 'none');
            }
            else if (value == "RegisterGmail") {
                $("#RegisterDiv").css('display', 'none');
                $("#RegisterFacebookDiv").css('display', 'none');
                $("#RegisterGmailDiv").css('display', 'block');
            }
        }
    </script>
• Include Latest Jquery java script file. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
• function Register(value) function checks the value and based on the value it hides and displays the <div>
• These <Divs> can be displayed or can be hide by using   $("#DivisionID").css('display', 'block');

That`s all.

Please share this useful information with other.If you are interested in reading my articles click on Join this site button located below blog archive.