Is there a way to make jQuery ignore child elements already hidden with slideDown()?

Question

On my website, I use some simple jQuery to slide down and up an existing element.

$('#menu li:first strong').bind('click', function() {

            var searchBox = $(this).parent().find('form');

            if (searchBox.is(':hidden')) {
                //$('#menu #advanced-search-block').hide();
                searchBox.slideDown(1000);

            } else {

                searchBox.slideUp(1000);
            }

        });

Inside of the parent <li> element are some elements of which their CSS is set to display: none. When I click the element to trigger this event, the hidden elements appear. I have tried using the commented out code to remedy this (which it does), but I am thinking there should be a more elegant solution. I know you can use .stopPropogation() on events, so is there anything you can do to make slideDown() stop making child elements with display: none visible?

Edit

Sorry about the lack of HTML guys. There is a fair bit of HTML around these elements, and I didn't want to post a huge amount of it. You can access the work in progress here: http://www.noosanativeplants.com.au/~new/ (If someone wants to post the offending markup, it would help other people in the future who find this question). Thank you

Answer 1

What sort of elements are hidden? I have a div with this css set and it isnt showing up when I toggle the visibility of its parent div.

Answer 2

I believe the way you are doing it is the only way. Also, I don't think that it is a jQuery issue specifically. The hidden attribute (just like opacity) will affect all children in the DOM tree, and thus when you show 'searchBox' it will show all inside elements. Picking the elements to hide at the same time you're sliding up will never show those elements.

Answer 3

Your jQuery looks good, as for the invisible elements you could define your own css class to explicitly hide the elemnts so that hide()/show() have no effect and use addClass()/removeClass()

Answer 4

Something like this, maybe?

$(this).filter(':not(>*)').slideDown(1000);

I'll try it in FireBug on your site and see if it works.

Edit: Nope, it doesn't. :-( Not sure what else to suggest other than what you've got.