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.
Download Link: Hiding and Displaying div tag Content in real time using Jquery.
Make this Page as Start-up Page: HidingandDisplayingDiv.aspx
In order to get the above result:
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.
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.
- Register Directly.
- Register Via Facebook Account.
- Register Via Gmail Account.
Download Link: Hiding and Displaying div tag Content in real time using Jquery.
Apart from that it also includes the other example: Real Time ASP.Net Dropdown Binding implementation in web application
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.
- 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');
<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>
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.