1st radio button triggers opening of a second radio button form

This is next episode of my coding travels :) this episode I would like some help in creating radio button form triggered by selecting other radio button. As far as I can make a single Radio appear, 3 just won't show up or do show up instead of stay hidden until I click proper radio.

I came up with:

<html>
    <head>
      <script type="text/javascript">
        function showB() { document.getElementById('area2').style.display = 'block'; }
        function showC() { document.getElementById('area').style.display = 'block'; }
        function hideB() { document.getElementById('area2').style.display = 'none'; }
        function hideC() { document.getElementById('area').style.display = 'none'; }
      </script>
    </head>
    <body>        
      <form name="radios">
        <INPUT TYPE=RADIO NAME="X" VALUE="H" onclick="hideB();hideC()"/>A 
        <INPUT TYPE=RADIO NAME="X" VALUE="L" onclick="showB();hideC()"/>B 
        <INPUT TYPE=RADIO NAME="X" VALUE="LL" onclick="showC();hideB()"/>C
            <form name="radios2" id="area2" style="display:none;">
            <INPUT TYPE=RADIO NAME="Y" />
            <INPUT TYPE=RADIO NAME="Y" />
            <INPUT TYPE=RADIO NAME="Y" />
            </form>
        <TEXTAREA id="area" style="display: none;" NAME="data" ROWS=10 COLS=50></TEXTAREA>
      </form>
    </body>
</html>

but it does not work as you will see.

If I change to show up only 1 radio button it works but it's not my aim:

<html>
    <head>
      <script type="text/javascript">
        function showB() { document.getElementById('area2').style.display = 'block'; }
        function showC() { document.getElementById('area').style.display = 'block'; }
        function hideB() { document.getElementById('area2').style.display = 'none'; }
        function hideC() { document.getElementById('area').style.display = 'none'; }
      </script>
    </head>
    <body>        
      <form name="radios">
        <INPUT TYPE=RADIO NAME="X" VALUE="H" onclick="hideB();hideC()"/>A 
        <INPUT TYPE=RADIO NAME="X" VALUE="L" onclick="showB();hideC()"/>B 
        <INPUT TYPE=RADIO NAME="X" VALUE="LL" onclick="showC();hideB()"/>C
<INPUT TYPE=RADIO NAME="Y" id="area2" style="display:none;"/>
        <TEXTAREA id="area" style="display: none;" NAME="data" ROWS=10 COLS=50></TEXTAREA>
      </form>
    </body>
</html>

Thanks for your input.

Solution

You can use divs for make this happen, put the form inside a div and the text area inside another div with the ID's you already gave:

<html>
<head>
  <script type="text/javascript">
    function showB() { document.getElementById('area2').style.display = 'block'; }
    function showC() { document.getElementById('area').style.display = 'block'; }
    function hideB() { document.getElementById('area2').style.display = 'none'; }
    function hideC() { document.getElementById('area').style.display = 'none'; }
  </script>
</head>
<body>        
  <form name="radios">
    <INPUT TYPE=RADIO NAME="X" VALUE="H" onclick="hideB();hideC()"/>A 
    <INPUT TYPE=RADIO NAME="X" VALUE="L" onclick="showB();hideC()"/>B 
    <INPUT TYPE=RADIO NAME="X" VALUE="LL" onclick="showC();hideB()"/>C

        <div id="area2" style="display:none">
            <form name="radios2">
            <INPUT TYPE=RADIO NAME="Y" />
            <INPUT TYPE=RADIO NAME="Y" />
            <INPUT TYPE=RADIO NAME="Y" />
            </form>
        </div> 

        <div id="area" style="display:none"> 
            <TEXTAREA NAME="data" ROWS=10 COLS=50></TEXTAREA>
        </div>

  </form>
</body>