Question

On the first click, it works as expected:

1. the class is changed
2. and the html content is changed from ‘Show…’ to ‘Close…’
3. the content area is expanded with the slideDown effect,

Good so far.

On the second click, …

1. the class changes
2. the html content is changed from ‘Close…’ to ‘Show…’
3. The content area does NOT go away as expected.

On the third click, …

1. the class is changed
2. the html content is changed
3. the already-shown content is re-shown with the slidedown effect.

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

Here’s the jQuery:

–

$('.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; });  

Here’s the HTML it’s acting on:

<h3 class='open_user_urls'>Show Search History</h3> <div id='user_urls'> // an OL tag with content </div> 

And the only applicable CSS:

#user_urls { display: none; } 

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…

EDIT 2 – Since the bug must be elsewhere, I’m accepting a code improvement for my jquery as the answer. Thanks.

Edit 3 – Found the source of the problem.

Inside the #user_urls div I have an series of OLs with the following css:

.url_list {float: left; width: 285px; list-style-position: outside; margin-left: 25px;} 

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.

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

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?

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

Answer 1

Perhaps something like this would be simpler?

$('.open_user_urls').toggle(     function () {         $(this).text('Close Search History').siblings('.user_urls').slideDown('slow');     },     function () {         $(this).text('Show Search History').siblings('.user_urls').slideUp('slow');     } ); 

The toggle function is designed for precisely the scenario you’re encountering.