How can I make radio button works with Collapsible panel?

5 pts.
Tags:
Ajax
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
Asked: Last updated:
Related Questions
1

Answer Wiki

Thanks. We'll let you know when a new response is added.

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.

Discuss This Question: 1  Reply

 
There was an error processing your information. Please try again later.
Thanks. We'll let you know when a new response is added.
Send me notifications when members answer or reply to this question.
  • MEHRA
    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
    145 pointsBadges:
    report

Forgot Password

No problem! Submit your e-mail address below. We'll send you an e-mail containing your password.

Your password has been sent to:

To follow this tag...

There was an error processing your information. Please try again later.

Thanks! We'll email you when relevant content is added and updated.

Following

Share this item with your network: