hello to all, i wanted to make accordion in a way, in my first panel there will be 2/3 radio buttons and a submit button. If on selection of a radio button and say submit, then next accordion panel will open. On second panel also few radio buttons and a submit buttons will be there. The same funda applies to the second panel too. Before selection of radio button, don't open second panel in accordion. Selection of radio button and submit must be there on both panel. Have created a code, but i dont know how to go further....
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="jquery-1.8.3.js"></script>
<style>
#bgclr{
height:100px;
width:100px;
float:left;
margin:0.5px;
border:1px solid silver;
}
.bgclr1{
height:100px;
width:50px;
float:left;
margin:0.5px;
border:1px solid silver;
background-color:#666699;
}
.bgclr2{
height:100px;
width:50px;
float:left;
margin:0.5px;
border:1px solid silver;
background-color:#666699;
}
.panel{
width:200px;
background-color:lightblue;
}
.panel1{
width:200px;
background-color:lightblue;
}
</style>
<script>
if(document.getElementById("que1").checked || document.getElementById("que2").checked)
{
function toggleMe(a)
{
document.getElementById('accordian').classList.add('panel');
var e=document.getElementById(a);
var i = document.getElementById(a + '_image');
if(!e)return true;
if(e.style.display=="none")
{
e.style.display="block"
i.src = 'YOUR OPEN IMAGE URL';
}
return false;
}
}
else
{
alert('dont click');
}
function toggle(a)
{
document.getElementById('accordian1').classList.add('panel1');
var e=document.getElementById(a);
var i = document.getElementById(a + '_image');
if(!e)return true;
if(e.style.display=="none")
{
e.style.display="block"
i.src = 'YOUR OPEN IMAGE URL';
}
return false;
}
</script>
</head>
<body>
<div id="bgclr">
<form>
<input type="radio" name="select" value="que1" id="que1" />select 1<br />
<input type="radio" name="select" value="que2" id="que2" />select 2<br /><br />
<a style="cursor:pointer;" onclick="return toggleMe('para1')"><strong id="nxt">Next</strong></a>
</form>
</div>
<div class="bgclr1" id="accordian">
<div id="para1" style="display:none;">
<form>
<input type="radio" name="select1" value="que3" id="que3" />select 1<br />
<input type="radio" name="select1" value="que4" id="que4" />select 2<br />
<a style="cursor:pointer;" onclick="return toggle('para2')"><strong>Next</strong></a>
</form>
</div>
</div>
<div class="bgclr2" id="accordian1">
<div id="para2" style="display:none;">
<a href="#">Link1</a><br />
<a href="#">Link1</a><br />
<a href="#">Link1</a><br />
</div>
</div>
</body>
</html>