jQuery show/hide not working
<p>This is really strange, and I've been beating my head against it for hours now and can't figure it out.</p>

<p>I'm using jQuery to hide some elements on a form (tagged with the class <code>.read-only</code>) and show other elements (tagged with the class <code>.edit-version</code>).</p>

<p>Basically, the user clicks an edit link, and within the parent of that link, the read-only items are hidden and the edit items (inputs) are displayed. This works fine.</p>

<p>The problem happens in the response from the server, which is passing back the opposite case. It finds the div that's hosting the form, and it hides the edit versions and displays the read only. Except it doesn't. Here's the code:</p>

<pre><code>host = $('#employee-card-49');
$('.edit-version', host).hide();
$('.read-only', host).show();
</code></pre>

<p>I've verified that it's got the correct div (<code>#employee-card-49</code>) is found, and is the right item, and is the only item with that id on the page.</p>

<p>I've verified that <code>$('.edit-version', host).length</code> is correct. It returns 3, indicating it's finding the three elements.</p>

<p>I've verified that each returned item from <code>$('.edit-version', host)</code> is correct. I can get the properties of them.</p>

<p>No javascript errors come up, but the hide() and show() calls just don't modify the display property at all. I've even tried calling <code>css('display', 'none')</code> without avail.</p>

<p>If I change the call to $('.edit-version').hide() call, it works, but that would affect other divs on the page that I don't want to affect.</p>

<p>Any help would be appreciated.</p>
