Hide and show another element onclick of a radio button, based on value
<p>I have 4 jquery radio buttons in my form something like this</p>

<pre><code>&lt;form:radiobutton path="lcmoption" name ="lcmoptions" id ="lock" value="lock" checked="checked"/&gt;
&lt;fmt:message key="lcm.form.options.lock" /&gt;&amp;nbsp;

&lt;form:radiobutton path="lcmoption" name ="lcmoptions" id="unlock" value= "unlock"/&gt;
&lt;fmt:message key="lcm.form.options.unlock" /&gt; &amp;nbsp;

&lt;form:radiobutton path="lcmoption" name ="lcmoptions" id="terminate" value="terminate" /&gt;
&lt;fmt:message key="lcm.form.options.terminate" /&gt; &amp;nbsp;

&lt;form:radiobutton path="lcmoption" name ="lcmoptions" id="wipe" value="wipe" /&gt;
&lt;fmt:message key="lcm.form.options.wipe" /&gt; &amp;nbsp;

&lt;form:radiobutton path="lcmoption" name ="lcmoptions" id="other" value="other" /&gt;
&lt;fmt:message key="lcm.form.options.other" /&gt; &amp;nbsp;
</code></pre>

<p><code>onclick</code> of the first four radio buttons I am dynamically loading the select box using an AJAX call. When the user clicks the last option, i.e, <code>other</code>, I need to hide the textbox and show a text area. </p>

<p>I tried using:</p>

<pre><code>$("input:radio[name=lcmoption]").click(function() {
    if(type=="other")
    {
        $([name="reasonsList"]).css("display",none");
        $([name="otherreasonsList"]).css("display", "block");
    }
    else
    {
        // AJAX CALL to load dropdown (for other options)
    }
}
</code></pre>

<p>But this did not work. I also tried: </p>

<pre><code>$([name="reasonsList"]).hide();
$([name="otherreasonsList"]).show();
</code></pre>

<p>This shows both the dropdown and text area. Can anyone help me on hiding <code>reasonsList</code> div and show <code>otherreasonsList</code> <code>div</code> <code>onclick</code> of a radio button with <em>other</em> value?</p>
