Jquery load into div on toggle

Not sure if this is possible but can you load and unload into a div on a jquery toggle?

something a bit like this?

$("#IDOFCLICK").live('click',function(){
$(this).toggleClass("active").('#IDOFDIVTOLOAD').load('PAAGETOLOAD').slideToggle("slow");
});

if you can I guess the above is not right, but, how would you also unload on the "rever开发者_JAVA百科se" toggle?

That won't work. The toggle you're using just toggles the class. There is a toggle event you could use, but it is not supported by live() to my knowledge.

When you say unload I assume you want to empty the content of #IDOFDIVTOLOAD. If that's right, you could try this:

$("#IDOFCLICK").live('click',function(){
    $(this).toggleClass("active");
    var $loadElement = $('#IDOFDIVTOLOAD');
    if( $loadElement.is(':empty') ) {
        $loadElement.load('PAAGETOLOAD').slideToggle("slow");
    } else {
        $loadElement.empty().slideToggle("slow");
    }
});

jQuery docs:

• .is() - http://api.jquery.com/is/
• .empty() - http://api.jquery.com/empty/

I ran across this and when I tried it, there was a little animation that took place before the page was loaded, then the toggle happened. I changed the code in the IF statement to an ajax call to test if the data was loaded before slideToggle. It gave the desired effect.

                    $.ajax({
                        type: 'GET',
                        url: "/pagetoload",
                        dataType: "html",
                        success: function(data)
                        {
                            $loadElement.html(data);
                            $loadElement.slideToggle("slow");
                        },
                        error: function()
                        {
                            alert("Error!");
                        }
                    });