On Initial loading of this webpage the div should be hidden in other words style="display:none" along with all the checkboxes unchecked, so far so good. The checkbox when checked should show the div with id specifyOther which with what I have done so far works perfect but when the user unchecks the checkbox, the div should go back to its initial state of hidden which it doesn't seem to do. I know I have to narrow down to this specific checkbox (hence the id) as there are others which shouldn't be affected and not pasted here. I'm not to sure as to where I have made a fault even though its a simple little thing as reversing the checked state. This is the code as following:

<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){$("#notspecified").click(function(){if($("#notspecified").length == $("#notspecified:checked").length){$("#specifyOther").show();}else{$("#specifyOther").removeAttr("sh ow");}
});
});
</script>


<input type="checkbox" name="natureOther" value="other" id="notspecified"/> Other <div id="specifyOther" style="display:none"><input type="text" name="txtsbOther" maxlength="" size="55"/></div>

any solutions, ideas, and corrections, and suggestions much appreciated