<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Пример интерактивной процедуры</title>
<style>
.left, .right{
display:inline-block;
padding-right:100px;
}
#step_1, #step_2, #step_3, #step_4, #step_5, #step_6{
display:none;
}
</style>
<script language="JavaScript" type="text/javascript">
function show(id){document.getElementById('step_'+id).style.display="block";}
function hide(id){document.getElementById('step_'+id).style.display="none";}
function instruction (ind){
if (ind==1) {
document.getElementById('radio-1').checked = true;
document.getElementById('radio-2').checked = false;
for (var i=1;i<6;i=i+2){
show (i);
hide(i+1);
}
}
else{
document.getElementById('radio-1').checked = false;
document.getElementById('radio-2').checked = true;
for (var i=2;i<7;i=i+2){
show (i);
hide(i-1);
}
}
}
</script>
</head>
<body>
<span class="left">
<div>Заголовок процедуры</div>
<div>
<input type="radio" id="radio-1" onClick="instruction (1)" />Параметр 1
</div>
<div>
<input type="radio" id="radio-2" onClick="instruction (2)" />Параметр 2
</div>
</span>
<span class="right">
<div id="step_1">Шаг_1</div>
<div id="step_2">Шаг_2</div>
<div id="step_3">Шаг_3</div>
<div id="step_4">Шаг_4</div>
<div id="step_5">Шаг_5</div>
<div id="step_6">Шаг_6</div>
</span>
</body>
</html>