Using Radio Buttons to hide div's with multiple layers

Question

I am well aware that using the Show/Hide function has been answered when it comes to radio buttons but I have searched high and low for a solution to my problem. What I am attempting to do is create a form where a visitor has a couple of options to choose from, they click one of said options, it displays a hidden div and inside that div it gives the visitor more options to choose from. This is where I run into the issue. What I would like to do is have the first hidden div that becomes displayed to stay shown after one of the options inside of that div is selected to display what that button is hiding.

Here is the jfiddle for what I'm currently working on - http://jsfiddle.net/UDEQZ/

Here is the html

<input name="pagetype" type="radio" onclick="show(0)" />First
<input name="pagetype" type="radio" onclick="show(1)" />Second
<input name="pagetype" type="radio" onclick="show(2)" />Third
<p></p>
<div id="d0" class="CF" style="display:none;">Select One:
<p></p>
<input name="pagetype" type="radio" onclick="show(3)" />One
<input name="pagetype" type="radio" onclick="show(4)" />Two
<input name="pagetype" type="radio" onclick="show(5)" />Three
<input name="pagetype" type="radio" onclick="show(6)" />Four
<input name="pagetype" type="radio" onclick="show(7)" />Five
<input name="pagetype" type="radio" onclick="show(8)" />Six
<input name="pagetype" type="radio" onclick="show(9)" />Seven</div>
<div id="d1">Two</div>
<div id="d2">Three</div>
<div id="d3">Hazaa</div>
<div id="d4">Bazinga</div>
<div id="d5">Hazaa</div>
<div id="d6">Bazinga</div>
<div id="d7">Hazaa</div>
<div id="d8">Bazinga</div>
<div id="d9">Hazaa</div>

And here is the script I'm using

function show(number) {
"use strict";
var el, i = 0;
while (el = document.getElementById("d" + (i++))) {
    el.style.display = "none";
}
document.getElementById('d' + number).style.display = "block";
}

For the HTML one thing I attempted that, to me, should have worked was with the onclick="show(3)" I changed it to onclick="show(0, 3)" But when you clicked on the radio button with One next to it, nothing happened.

I'm still new to javascript/jquery and I've seen show/hide being used for a lot of the radio button questions asked but I have yet to see a solution or even a question pertaining to the problem that I am having. I've tried a few different options, running it through an array(still kinda going huh? on that one haha), using the show/hide function, and multiple other ways that have been described on here and other sites. For some reason I feel as if the solution is extremely simple and I've just been too daft to see it posted or skipped right over it.

Answer 1

since jquery is tagged i am using jquery to reduce you code..

function show(number) {

  $('[id^="d"]').hide();
  if(number >=3){
    $('#d0').show();
  }
  $('#d' + number).show();
}

however this is cosidering all you other div such as d3,d4,d5,d6.. comes under d0.. what i am doing here is using a attribute selector $('[id^="d"]') which select all element ids starting with d and hiding it... so this hide all the elements.. and then checkin if the number parameter is > 3 ..if its greater than 3 then , show #d0 element.., then show just the element whose id is = number

fiddle here