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:
Sample code for show/hide div tag using java script in asp.net:
If this post was help to you. Then Share this to your friends. Thanks!
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>
Posts
0 comments:
Post a Comment
Share your thoughts here...