jQuery Slide Toggle Not Working - Resolved
<p>On the first click, it works as expected:</p>

<ol>
<li>the class is changed </li>
<li>and the html content is changed from 'Show...' to 'Close...'</li>
<li>the content area is expanded with the slideDown effect,</li>
</ol>

<p>Good so far.</p>

<p>On the second click, ...</p>

<ol>
<li>the class changes</li>
<li>the html content is changed from 'Close...' to 'Show...'</li>
<li>The content area does NOT go away as expected.</li>
</ol>

<p>On the third click, ...</p>

<ol>
<li>the class is changed</li>
<li>the html content is changed </li>
<li>the already-shown content is re-shown with the slidedown effect.</li>
</ol>

<p>So everything is working except for the 2nd click when the content is supposed to be hidden again.</p>

<p>Here's the jQuery:</p>

<p>-</p>

<pre><code>$('.open_user_urls').live('click', function() {
 $('#user_urls').slideDown('slow');
 $(this).addClass('close_user_urls');
 $(this).removeClass('open_user_urls');
 $(this).html('Close Search History');
 return false;
});

$('.close_user_urls').live('click', function() {
 $('#user_urls').slideUp('slow');
 $(this).addClass('open_user_urls');
 $(this).removeClass('close_user_urls');
 $(this).html('Show Search History');
 return false;
});
</code></pre>

<p>Here's the HTML it's acting on:</p>

<pre><code>&lt;h3 class='open_user_urls'&gt;Show Search History&lt;/h3&gt;
&lt;div id='user_urls'&gt;
// an OL tag with content
&lt;/div&gt;
</code></pre>

<p>And the only applicable CSS:</p>

<pre><code>#user_urls { display: none; }
</code></pre>

<p>EDIT - I replaced my jquery code with functionally equivalent code supplied in an answer below, but the problem persists. So the cause must be elsewhere. I do recall this code working originally, but then it stopped. I'm stumped. Time to strip everything else out piece by piece...</p>

<p>EDIT 2 - Since the bug must be elsewhere, I'm accepting a code improvement for my jquery as the answer. Thanks.</p>

<p>Edit 3 - Found the source of the problem.</p>

<p>Inside the #user_urls div I have an series of OLs with the following css:</p>

<pre><code>.url_list {float: left; width: 285px; list-style-position: outside; margin-left: 25px;}
</code></pre>

<p>Each OL contains a list of 20 urls and is meant to display in as many multiple columns as required to display all the URLs.</p>

<p>Removing the float: left; on these OL tags causes the problem to go away.</p>

<p>So having a float on the content contained in the DIV thats showing and hiding is causing it not not hide at all. Why would this happen?</p>

<p>EDIT 4: Adding a  inside the #user_urls DIV allows the hiding action to work properly.</p>
