How to make div/panel visible on basis of radiobuttonlist selection ?


Hi

If we have to do this task on client side without using postback then we can do using Javascript like this

<%@ 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"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head runat="server">
<title></title>

<script type="text/javascript">

function HidDiv()
{
document.getElementById(‘Div1’).style.display = "none";
document.getElementById(‘Div2’).style.display = "none";
}

function showhidesearch()
{
var radio1=document.getElementById(‘<%=RadioButtonList1.ClientID %>’);

var rblopts = radio1.getElementsByTagName("input");

if(rblopts[0].checked)
{
document.getElementById(‘Div1’).style.display="block";
document.getElementById(‘Div2’).style.display="none";
}
else if(rblopts[1].checked)
{
document.getElementById(‘Div2’).style.display="block";
document.getElementById(‘Div1’).style.display="none";

}
}

</script>

</head>

<body onload = "javascript:HidDiv();">
<form id="form1" runat="server">
<div style="margin-left:200px;">

<asp:RadioButtonList ID="RadioButtonList1" runat="server"
RepeatDirection="Horizontal" style="font-weight: 700"
onclick="showhidesearch()" >
<asp:ListItem Value="1">First Div</asp:ListItem>
<asp:ListItem Value="2">Second Div</asp:ListItem>
</asp:RadioButtonList>
<br />

<div id="Div1" style="background-color:Blue; width:200px; height:200px;" runat="server">
<br />
<b> This is the first div </b>

</div>
<br />
<br />

<div id="Div2" style="background-color:Lime; width:200px; height:200px;" runat="server">
<br />
<b> This is the Second div</b>

</div>

</div>
</form>
</body>
</html>

Advertisement

3 thoughts on “How to make div/panel visible on basis of radiobuttonlist selection ?

  1. Jon April 19, 2014 / 5:41 pm

    Excellent post. I certainly appreciate this site.
    Continue the good work!

  2. velvahoffman October 8, 2014 / 10:12 pm

    I’m amazed, I must say. Rarely do I encounter a blog that’s both equally educative
    and interesting, and let me tell you, you have hit
    the nail on the head. The problem is something which too few people are speaking intelligently about.

    I am very happy that I found this during my hunt
    for something relating to this.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.