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.

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.

• javascript
• jquery

• This is a known issue of Jquery, toggling does not respond so well to float containers and/or contents. I'm looking for ways to bypass this or replace the toggle use in my case. I'll keet you posted. (seems like it occurs mainly in FF and chrome both in different ways, surprisingly for once IE seems to behave better) – Ar3s Commented May 2, 2011 at 12:30

8 Answers 8

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.

To reiterate the problem and resolution to this question...

Inside the #user_urls DIV were a series of OL tags, each floated left. It was the float that was causing the problem.

Adding a <br style='clear: left;' /> inside the #user_urls DIV fixed the problem.

From what I've found, jQuery needs to have the height style set in order to slide it correctly. A work around I've used is to set the height before you slide it closed.

$('#user_urls').css('height', $('#user_urls').height() + 'px');

After you set it once, it should work correctly from then on. Check out this tutorial for a more detailed explanation.

Since this question was opened, jQuery have put in a fix for this themselves.

Updating to the latest version of jQuery solved the problem for us with no CSS changes. (jQuery 1.4.4 as of Dec 9th 2010)

Found via discussion on Google Groups in turn found from d12's answer. According to duscussion, in some jQuery 1.3x versions this bug affected several actions, slideUp, fadeOut, and toggle, if the element being hidden/slid up is a a non-floated parent containing floated children.

I think Conor's answer might put you on the right track. I might also suggest slideToggle and toggleClass:

http://docs.jquery.com/Attributes/toggleClass

http://docs.jquery.com/Effects/slideToggle

I could be as easy as:

$("h3.open_user_urls").click(function () { 
      next("div#user_urls").slideToggle(); 
});

I can't duplicate your bug. I used your exact code and I cannot replicate your issue.

This must be a script error from a different place in your JS code.

Thanks for this question. It really got me on my way figuring out the problem toggling an element with floated children.

Another resource that really helped and explains the behavior a bit can be found on this Google group discussion.

Putting a non breaking space in your div is another solution similar to what The Reddest suggested that worked for me on a similar issue.