Introduction
This tip will help you know the tricks behind showing or hiding the controls.
Background
Many people search for the same solution. So I planned to post this as a tip.
Using the Code
You can show or hide controls in many ways. I will explain a few of them.
1. Using Code Behind
Just load content to be shown or hidden in panel and set visibility="false"
. When user clicks on button, set panel visibility="true"
.
Example:
HTML Code
<div>
Question 1. what is object..?
<br />
Answer : Object is a instance of class
<br />
<asp:Button ID="Button1" runat="server" Text="explain" />
<br />
<asp:Panel ID="panel1" Visible="false" runat="server">
A class or struct definition is like a blueprint that specifies what the type can
do. An object is basically a block of memory that has been allocated and configured
according to the blueprint. A program may create many objects of the same class.
dynamically.
</asp:Panel>
</div>
VB Code
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) _
Handles Button1.Click
If panel1.Visible = True Then
panel1.Visible = False
Button1.Text = "explain"
Else
panel1.Visible = True
Button1.Text = "Hide"
End If
End Sub
You can also use CSS property to do the same..
Initially, you have to set style='display:none;'
for panel and through code behind, you can change CSS property like panel1.Style.Add("display","block")
.
2. Using JQuery
Script
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#div1").hide();
$("#Button1").click(function()
{
$("#div1").toggle();
});
});
</script>
HTML
<div>
Question 1. what is object..?
<br />
Answer : Object is a instance of class
<br />
<input id="Button1" type="button" value="explain" />
<br />
<div id="div1">
A class or struct definition is like a blueprint that specifies what the type can
do. An object is basically a block of memory that has been allocated and configured
according to the blueprint. A program may create many objects of the same class.
</div>
</div>
Also, you can use CSS property to do the same.
$(document).ready(function()
{
$("#div1").css("display","none");
$("#Button1").click(function()
{
$("#div1").css("display","block");
});
});
You can refer to this link for more JQuery examples.