ASP.NET: How to Show/ Hide Div Tags based on radio button selection | Coding Cluster - using asp.net, c#, mvc 4, iphone, php, ios, javascript, in asp.net mvc 3 & more
 

ASP.NET: How to Show/ Hide Div Tags based on radio button selection

Wednesday

Show/hide div based on radio button selection in asp.net:
                                                                       This post will show you how to create a hidden Div and display it with the click of a link. The following code will Show / Hide a div tags  when changing the selection of a radio button.

Sample code for show/hide div tag from code-behind using asp.net:

@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Hide div</title>

    <script runat="server">
        protected void rbtnHideDiv_SelectedIndexChanged(object sender, System.EventArgs e)
        {
            if (rbtnHideDiv.SelectedItem.Text == "Red")
            {
                divRed.Style.Add("display", "none");
                divGreen.Style.Add("display", "inline");
            }
            if (rbtnHideDiv.SelectedItem.Text == "Green")
            {
                divGreen.Style.Add("display", "none");
                divRed.Style.Add("display", "inline");
            }
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:RadioButtonList ID="rbtnHideDiv" runat="server" AutoPostBack="true" OnSelectedIndexChanged="rbtnHideDiv_SelectedIndexChanged">
            <asp:ListItem>Red</asp:ListItem>
            <asp:ListItem>Green</asp:ListItem>
        </asp:RadioButtonList>
    </div>
    <div style="background-color: Red" id="divRed" runat="server">
        <asp:Label ID="lblTextRed" SkinID="label_information" Text="My background is RED"
            ForeColor="White" runat="server"></asp:Label>
    </div>
    <div style="background-color: Green" id="divGreen" runat="server">
        <asp:Label ID="lblGreen" SkinID="label_information" Text="My background is GREEN"
            ForeColor="White" runat="server"></asp:Label>
    </div>
    </form>
</body>
</html>

                                   

Sample code for show/hide div tag using java script in asp.net:

<html>
<head runat="server">
    <title></title>
     <script type="text/javascript" language="javascript">

         function hideDiv() {
             document.getElementById('div1').style.display = 'none';
             document.getElementById('div2').style.display = 'none';

             if (document.getElementById('rbtnMain_0') != null) {
                 if (document.getElementById('rbtnMain_0').checked) {
                     document.getElementById('div1').style.display = 'block';
                 }
             }

             if (document.getElementById('rbtnMain_1') != null) {
                 if (document.getElementById('rbtnMain_1').checked) {

                     document.getElementById('div2').style.display = 'block';

                 }
             }
         }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <asp:RadioButtonList ID="rbtnMain" runat="server" onchange="hideDiv()">
            <asp:ListItem Text="rb1" Value="1" Selected="True"></asp:ListItem>
            <asp:ListItem Text="rb2" Value="2"></asp:ListItem>
        </asp:RadioButtonList>
        <div id="divmain">
        <div id="div1">
           div1 <asp:Button ID="Button1" runat="server" Text="Button" />
        </div>
        <div id="div2" style="display:none">
           div2  <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        </div>
        </div>
        
    </div>
    </form>
</body>
</html>
If this post was help to you. Then Share this to your friends. Thanks!

0 comments:

Post a Comment

Share your thoughts here...

 
 
 

RECENT POSTS

Boost

 
Blogger Widgets