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>