jQuery - Leveraging dynamic (variable) element id's.

The script below is for an approval checkbox which is used on several containers within a complex form.  It works, to an extent.  What doesn't work is this:

$(thisID).hide();
and
$(thisID).show();

Select allOpen in new window

The plan was to pass in the ID of the container to hide/show in the 'collapse' attribute of the check box container being clicked.  The alert shows the ID is being passed, and is accessible.  I thought that once it was in a variable form, that I could access it.  I also tried document.getElementById(thisID), but was equally unsuccessful in hiding/showing the container with the ID passed in the collapse attribute.

Any help would be greatly appreciated.

<script type="text/javascript">
	$(document).ready(function() {
		$('.checklist input:checked').parent().addClass('selected');
		$(".checklist .checkbox-select").click(
			function(event) {
				event.preventDefault();
				var thisID = $(this).parent().attr('collapse');
				alert('select: ' + thisID);
				$(thisID).hide();
				$(this).parent().addClass('selected');
				$(this).parent().find(':checkbox').attr('checked','checked');
			}
		);
		$('.checklist .checkbox-deselect').click(
			function(event) {
				event.preventDefault();
				var thisID = $(this).parent().attr('collapse');
				alert('deselect: ' + thisID);
				$(thisID).show();
				$(this).parent().removeClass('selected');
				$(this).parent().find(':checkbox').removeAttr('checked');
			}
		);
	});
</script>

Select allOpen in new window

Below is the code with the check boxes.  Please let me know if you need more information.

<div class="approvalToggleContainer">
	<ul class="checklist">
		<li collapse="subjectApproval">
			<input name="checkApprove" value="subjectChkBx" type="checkbox" />
			<label for="subjectChkBx">Email Subject</label>
			<a class="checkbox-select" href="">&nbsp;</a>
			<a class="checkbox-deselect" href="">&nbsp;</a>
		</li>
	</ul>
</div>

<fieldset class="previewContainer" id="subjectApproval">
	<legend>Email Subject</legend>
	<div id="subjectContainer">Subject Container</div>
</fieldset>

<br class="clear" />

<div class="approvalToggleContainer" id="bodyApproval">
	<ul class="checklist">
		<li collapse="bodyApproval">
			<input name="checkApprove" value="bodyChkBx" type="checkbox" />
			<label for="bodyChkBx">Email Body</label>
			<a class="checkbox-select" href="">&nbsp;</a>
			<a class="checkbox-deselect" href="">&nbsp;</a>
		</li>
	</ul>
</div>

<fieldset class="previewContainer" id="bodyApproval">
	<legend>Email Body</legend>
	<div id="emailPreviewDIV"></div>
	<div>&nbsp;</div>
</fieldset>

<br class="clear" />

<div class="approvalToggleContainer" id="recipientsApproval">
	<ul class="checklist">
		<li collapse="recipientsApproval">
			<input name="checkApprove" value="recipientsChkBx" type="checkbox" />
			<label for="recipientsChkBx">Email Recipients</label>
			<a class="checkbox-select" href="">&nbsp;</a>
			<a class="checkbox-deselect" href="">&nbsp;</a>
		</li>
	</ul>
</div>

<fieldset class="previewContainer" id="recipientsApproval">
	<legend>Email Recipient Detail</legend>
	<div id="recipientsContainer">Recipients Container</div>
</fieldset>

<br class="clear" />

Select allOpen in new window