Alternative for having a li inside li element in HTML Form

Question

I am creating a form where in 'Are you affiliated to institution? Y/N' question should show up another small forms which have the relevant information. I am trying to have the jQuery fadeIn() fadeOut() methods & trying to show the subform. but when I try to do it.

1. putting an li tag to whole form & trying to call. But it says I cannot put li inside another li in XHTML 1.0 Transitional

2. When I try to put the subform inside the div then it says div cannot be placed inside ul element.

Is there a way to work around this? I am thinking changing the DOCTYPE would do but I am now sure which one would be good one or may be there is some other way to work around with the tags.

Part 2 :

I succesfully got to work my subform fading thing working. But When I press Y in first instance & then select N option. The two subforms get concatenated. I think I have to write more of the javascript to make it a mutual exclusive event. Here is my 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>

Similarly for NO option my 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>

Thanks,

Answer 1

You cannot put an li in an li, but you can put it in a ul

<ul>
  <li>
    <ul>
      <li></li>
    </ul>
  </li>
</ul>