Dependent Webform Components

So here are the steps i figured out thanks to help above, seems functional and working for me, hope it helps others out:
In my webform, i want a checkbox field that when checked unveils 2 mandatory textfields and an optional textfield under it.

I just create a main fieldset form componant called 'business' to hold all my fields in this question.
I add a markup code form componant first which will be modified later. be sure to set its input filter as php filter.
I create a checkbox form componant called 'do_you_enjoy_your_job' with yes and no options. The checkbox isnt mandatory as having it unchecked is valid option of course.
I create a subfieldset after this called 'optional_enjoy' that will hold 3 textfields, notice on teh view source of the webform its css ID is 'webform-component-optional_enjoy'.
Then create 3 textfields underneith this subfieldset. i do not set them as mandatory via GUI as this will be custom validated only if checked.
I look at the source of the form, i see the checkbox fields name is called 'submitted[business][do_you_enjoy_your_job][yes]'.
The 3 textfields i see are called:
submitted[business][optional_enjoy][if_yes_why_do_you_love_it]
submitted[business][optional_enjoy][if_yes_why_do_you_like_it]
submitted[business][optional_enjoy][if_yes_why_do_you_do_it]
I will use these to target the script via javascript later.

So my markup code I add this:

echo '
<script type="text/javascript">

	//functions to show/enable and hide/disable specific fieldset
	function showValues(){
        $("#webform-component-optional_enjoy").show();
        $("input[name=\'submitted[business][optional_enjoy][if_yes_why_do_you_love_it]\']").removeAttr("disabled");
        $("input[name=\'submitted[business][optional_enjoy][if_yes_why_do_you_like_it]\']").removeAttr("disabled");
        $("input[name=\'submitted[business][optional_enjoy][if_yes_why_do_you_do_it]\']").removeAttr("disabled");

		//only first 2 subquestions are required
         $("label[for=\'edit-submitted-business-optional-enjoy-if-yes-why-do-you-love-it\']").append(\'<span class="form-required" title="This field is required.">*</span>\');
        $("label[for=\'edit-submitted-business-optional-enjoy-if-yes-why-do-you-like-it\']").append(\'<span class="form-required" title="This field is required.">*</span>\');		
	}
	function hideValues(){
        $("#webform-component-optional_enjoy").hide();
        $("input[name=\'submitted[business][optional_enjoy][if_yes_why_do_you_love_it]\']").attr("disabled","disabled");
        $("input[name=\'submitted[business][optional_enjoy][if_yes_why_do_you_like_it]\']").attr("disabled","disabled");
        $("input[name=\'submitted[business][optional_enjoy][if_yes_why_do_you_do_it]\']").attr("disabled","disabled");
			
		//only first 2 subquestions are required
        $("label[for=\'edit-submitted-business-optional-enjoy-if-yes-why-do-you-love-it\'] span").remove();
        $("label[for=\'edit-submitted-business-optional-enjoy-if-yes-why-do-you-like-it\'] span").remove();
	}

    $(document).ready(function(){

    $("input[name=\'submitted[business][do_you_enjoy_your_job][yes]\']").click(function(){
      if(this.checked) {//check events checked property... if they just checked it, show the hidden fieldset, undisable the textfields, and add the required * at end of each field. If above condition doesnt work might need to get DOM node directly $("...your target").get(0).checked (just noticed not sure why i have access to that property hehe).
		showValues();
      }
      else {//if just unchecking, hide the options and disable them, and get rid of the required * as its not required (guess u dont need it, as its hidden anyway, but eh). 
		hideValues();
       }
    });

  });


</script>
';

//also check to see what default state of subfields should be, if the  checkbox is checked when arrive to the page (via a result submission page or an error after submit), before any onclick events.
echo('
	<script type="text/javascript">
	$(document).ready(function(){	
	
		var checkbox = $("input[name=\'submitted[business][do_you_enjoy_your_job][yes]\']");
		
		if( checkbox.get(0).checked )//need checked property of DOM node
		{
			showValues();
		}
		else
		{
			hideValues();
		}
	});
	</script>
');
//end of code markup form component











THIS GOES INTO THE custom data validation code added to 'Webform advanced settings' in the 'Additional Validation' field on the Webform Settings Configuration page:
<?php

$custom_submitted = $_POST['submitted'];
if(  ($custom_submitted['business']['do_you_enjoy_your_job']['yes']=='yes')  )
{
	//will error the form, show the message at top and redden the border of offending fields
	if( trim($custom_submitted['business']['optional_enjoy']['if_yes_why_do_you_love_it']) == '' )
	{
	form_set_error('submitted[business][optional_enjoy][if_yes_why_do_you_love_it]','if_yes_why_do_you_love_it is required.');
	}
	if( trim($custom_submitted['business']['optional_enjoy']['if_yes_why_do_you_like_it']) == '' )
	{
	form_set_error('submitted[business][optional_enjoy][if_yes_why_do_you_like_it]','if_yes_why_do_you_like_it is required.');
	}	
}

ill prob add Save Draft feature and see if theres an option in this componant to only allow 1 form submission per user.
Then itll be perfect