Reveal Content with Checkbox

[Reliable]

Hey everyone,

Got a problem. I don't know JS and I've googled my problem. Either I'm not find what I need or I am not understanding what I've found.

As the title says I have a form which check boxes. The last check box is labeled "other". What I want is that when the user clicks other my text field contained in my hidden "details" div will be displayed so they can specify "other".

Here is the JS code I have in the head of my page:

<script type="text/javascript" language="JavaScript"><!--
function RemoveContent(d) {
document.getElementById(d).style.display = "none";
}
function InsertContent(d) {
document.getElementById(d).style.display = "";
}
//--></script>

Here is the code on the "other" check box:

<label class="checks">
        <input type="checkbox" name="Other" id="other"   onselect="PresentForm ('details');" />
        Other</label>

...and the code for the details div:

<div id="details" class="checks">
    <label >
    <input type="text" name"details" size="30" />Please Explain</label>
    </div>

Here is the CSS for the details text field:

#details {
	padding-left:20px; 
	display:none;
}

Can someone help, please?

Thanks in advance for your time.

[@developer]

Try this..Not sure whether thats what you require.

<script type="text/javascript">
function toggleDiv()
{
	var boxChecked = document.getElementById("other").checked;
	var myDiv = document.getElementById("details");
	
	boxChecked ?myDiv.style.display="block":myDiv.style.display="none";
}
</script>

<label class="checks">
       <input type="checkbox" name="Other" id="other" onchange="toggleDiv()" />
Other</label>

<div id="details" class="checks" style="display:none">
    <label >
    <input type="text" name"details" size="30" />Please Explain</label>
</div>