Home > IT Answers > Development > How can I make radio button works with Collapsible panel?
Eddyperu
5 pts.
 How can I make radio button works with Collapsible panel?
Ajax, Collapsible panel, JavaScript, Radio buttons
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. 
Thanks


Software/Hardware used:
ASKED: February 19, 2010  5:41 PM
UPDATED: March 5, 2011  5:45 AM
RELATED QUESTIONS
Answer Wiki:
Make each panel a div with style="display: none" and and id like id="divOptionOne". give the radio buttons an onclick event set to a functions that will unhide the desired panel and hide all the others.
Last Wiki Answer Submitted:  February 19, 2010  11:06 pm  by  Gent01   1,855 pts.
All Answer Wiki Contributors:  Gent01   1,855 pts.
To see all answers submitted to the Answer Wiki: View Answer History.


RSS - Discussions Help
Discuss This Question:
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

 

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

MEHRA
 145 pts.