Альтернатива li внутри элемента li в HTML-форме

Я создаю форму, где в разделе «Вы связаны с учреждением?» Вопрос «Да/Нет» должен отображать другие небольшие формы, содержащие соответствующую информацию. Я пытаюсь использовать методы jQuery fadeIn() fadeOut() и пытаюсь показать подчиненную форму. но когда я пытаюсь это сделать.

1. помещая тег li во всю форму и пытаясь позвонить. Но он говорит, что я не могу поместить li внутри другого li в XHTML 1.0 Transitional

2. Когда я пытаюсь поместить подчиненную форму в элемент div, он говорит, что div не может быть помещен в элемент ul.

Есть ли способ обойти это? Я думаю, что изменение DOCTYPE подойдет, но теперь я уверен, какой из них будет хорошим, или, может быть, есть какой-то другой способ обойти теги.

Часть 2:

Я успешно начал работать с моей подчиненной формой. Но когда я сначала нажимаю Y, а затем выбираю вариант N. Две подформы объединяются. Я думаю, что мне нужно написать больше javascript, чтобы сделать это взаимоисключающим событием. вот мой js

   <script type="text/javascript" >
      $(document).ready(function() {
      $('#subafform').hide();
      $("#element_4_1").click( function(){
        if( $(this).is(':checked')) {
               $('#subafform').fadeIn();
        } else {
            $('#subafform').fadeOut();
        }
        });
        });

    </script>

Точно так же для варианта НЕТ мой js:

<script type="text/javascript" >
 $(document).ready(function() {
 $('#subnonafform').hide();
 $("#element_4_2").click( function(){
    if( $(this).is(':checked')) {
           $('#subnonafform').fadeIn();
    } else {
        $('#subnonafform').fadeOut();
    }
    });
    });

</script>

Спасибо,