[jQuery] slide and fade

[RajD]

I need jquery solution so that I can slide and fade a div. The div
will have a open and close hyperlink which needs to be toggled
between. But after each toggle I need to hide and show some html
elements.

For example when a user clicks the open link the div slides open and
hides some images and text that is located in other divs on the page.
When the user clicks the close link the div slides back and the images
re-appear in the other divs.

I've currently implemented this using the following code:

---- jquery sections -----
jQuery.fn.slideFadeToggle = function(speed, easing, callback) {
                                        return this.animate({opacity: 'toggle', 
height: 'toggle'}, speed,
easing, callback);
                                 };

                                 $(document).ready(function(){
                                        $('#openSearch span:first').hide();
                                        $("#openSearch").click(function(){
                                        $('.textChooseYourContinent').toggle();
                                        $("#SearchDiv").slideFadeToggle('slow');
                                        });
                             });

----- html section ------

                                                <a id="openSearch" 
href="#"><span id="close"
class="textChooseYourContinent">Close<img src="images/arrowUp.gif"
alt="Close Search"></span><span id="open"
class="textChooseYourContinent">Open<img src="images/arrowDown.gif"
alt="Open Search"></span></a>


After the slideFadeToggle event ends I have no way of seeing what
state the toggle is in and the ability to fire any further jquery to
show/hide other elements.

I found this post, http://jsbin.com/ojuju/edit, but the else statement
doesn't fire when using the above plugin. It only works when using the
standard toggle() method.

I would appreciate any help on this.

Thanks in advance.