How to Show or Hide Controls Dynamically

• Download MyExamples.zip - 28.8 KB

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.