I am trying to create a radio button list that will execute a Collapsible panel.
Each radio button will contain collapsible panel, when the client select a radio button, the collapsible below that specific radio button will open and it will collapse when another radio button is selected.
Hi friends Mr.Grnts01 are right here I also provide solution for above question
I am providing code snippet just copy and paste this code I think u will get u r dezire result.
I have done it in .net here is that code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadioButton.aspx.cs" Inherits="RadioButton" %>
<!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 runat="server">
<title></title>
<script type="text/jscript" language="javascript">
function Check(id) {
if (id == 'Div0') {
alert("Hii now Div1 will diplay");
document.getElementById(id).style.display = 'block';
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'none';
document.getElementById('Div3').style.display = 'none';
}
if (id == 'Div1') {
alert("Hii now Div2 will diplay");
document.getElementById(id).style.display = 'block';
document.getElementById('Div0').style.display = 'none';
document.getElementById('Div2').style.display = 'none';
document.getElementById('Div3').style.display = 'none';
}
if (id == 'Div2') {
alert("Hii now Div3 will diplay");
document.getElementById(id).style.display = 'block';
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div0').style.display = 'none';
document.getElementById('Div3').style.display = 'none';
}
if(id == 'Div3') {
alert("Hii now Div4 will diplay");
document.getElementById(id).style.display = 'block';
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'none';
document.getElementById('Div0').style.display = 'none';
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<h2> Panel hide and disply Demo</h2>
<div>
<input type="radio" id="rdo1" runat="server" onclick="Check('Div0')"/> <label for="rdo1"> Panel1</label><br />
<input type="radio" id="Radio1" runat="server" onclick="Check('Div1')" /><label for="Radio1"> Panel1</label><br />
<input type="radio" id="Radio2" runat="server" onclick="Check('Div2')" /><label for="Radio2"> Panel1</label><br />
<input type="radio" id="Radio3" runat="server" onclick="Check('Div3')" /><label for="Radio3"> Panel1</label>
</div>
<br />
<h3> Here the Panel will display</h3>
<br />
<div id="Div0" style="display:none; border:1px solid Green; width:200px;">
Div 1 is visible When click on Panel1
</div>
<div id="Div1" style="width:200px; display:none; border:1px solid Red;">
Div 2 is visible When click on Panel2
</div>
<div id="Div2" style="width:200px; display:none;border:1px solid Green;">
Div 3 is visible When click on Panel3
</div>
<div id="Div3" style="width:200px; display:none; border:1px solid red;">
Div 4 is visible When click on Panel4
</div>
</form>
</body>
</html>
you just copy and paste this code in any .aspx page and run in the browser please try to run in Internet Explorer because java script nature is different for browser
Discuss This Question: 1  Reply