Javascript-форум - Появление нового списка при включении радиокнопки

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Появление нового списка при включении радиокнопки (https://javascript.ru/forum/dom-window/43901-poyavlenie-novogo-spiska-pri-vklyuchenii-radioknopki.html)

Появление нового списка при включении радиокнопки

Помогите реализовать такой нюанс. Есть список:

РадиоКнопка1
РадиоКнопка2
РадиоКнопка3
РадиоКнопка4

Необходимо, чтобы при выборе РадиоКнопки2 появился список из дополнительных РадиоКнопок, например:

РадиоКнопка1
РадиоКнопка2
- РадиоКнопка2а
- РадиоКнопка2б
- РадиоКнопка2в
- РадиоКнопка2г
РадиоКнопка3
РадиоКнопка4

Т.е. чтобы уже можно было выбирать вариант из дополнительных кнопок.

У меня нет своего подобного варианта, к сожалению. Только сам радио список. Поэтому и прошу Вашей помощи...
Хотя что-то подобное есть, только тут ссылки в списке, а мне хотелось бы оформить это в виде radio кнопок

Код:

<html>

<head>





<script type="text/javascript">

var id_menu = new Array('sub_menu_1','sub_menu_2','sub_menu_3');

startList = function allclose() {

        for (i=0; i < id_menu.length; i++){

                document.getElementById(id_menu[i]).style.display = "none";

        }

}

function openMenu(id){

        for (i=0; i < id_menu.length; i++){

                if (id != id_menu[i]){

                        document.getElementById(id_menu[i]).style.display = "none";

                }

        }

        if (document.getElementById(id).style.display == "block"){

                document.getElementById(id).style.display = "none";

        }else{

                document.getElementById(id).style.display = "block";

        }

}

window.onload=startList;

</script>



</head>

<body>

<div id="menu_body">

        <ul>

                <li><a href="#" onclick="openMenu('sub_menu_1');return(false)">Пункт №1</a>

                        <ul id="sub_menu_1">

                                <li><a href="#">Подпункт №1</a></li>

                        </ul>

                </li>

                <li><a href="#" onclick="openMenu('sub_menu_2');return(false)">Пункт №2</a>

                        <ul id="sub_menu_2">

                                <li><a href="#">Подпункт №1</a></li>

                                <li><a href="#">Подпункт №2</a></li>

                        </ul>

                </li>

                <li><a href="#" onclick="openMenu('sub_menu_3');return(false)">Пункт №3</a>

                        <ul id="sub_menu_3">

                                <li><a href="#">Подпункт №1</a></li>

                                <li><a href="#">Подпункт №2</a></li>

                                <li><a href="#">Подпункт №3</a></li>

                        </ul>

                </li>

        </ul>

</div>





</body>

</html>

Sintes,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  div{
    display: none;
  }
  input:checked + div{
    display: block;
  }
  </style>
</head>

<body>

<input name="radio" type="radio" value="1">1
<input name="radio" type="radio" value="2">2
<div>
<input name="radio_sub2" type="radio" value="21">21
<input name="radio_sub2" type="radio" value="22">22
<input name="radio_sub2" type="radio" value="23">23
</div>
<input name="radio" type="radio" value="3">3
<div>
<input name="radio_sub3" type="radio" value="31">31
<input name="radio_sub3" type="radio" value="32">32
<input name="radio_sub3" type="radio" value="33">33
</div>


</body>

</html>

Cпасибо Вам большое!!