jQuery .toggle() not working as expected with second function?

I'm trying to create a button to show / hide a div below it, all is working fine, I'm just struggling with the last bit!

I need to distinguish wether it's a show or hide action so I can pass the variable elsewhere, here's what I have..

$(this).find('.hide-close').click(
            function() {
                $(this).siblings('.dragbox-content').toggle(function() { 

                    alert($(this).parent().attr("id") + ' Show');

                    },function() { 

                    alert($(this).parent().attr("id") + ' Hide');

                    }

                );

            })
        .end()
        });

If use the following code, taking out the second function within toggle(), it works?! But then I don't have a show / hide variable.

$(this).find('.hide-close').click(
            function() {
                $(this).siblings('.dragbox-content').toggle(function() { 

                    alert($(this).parent().attr("id") + ' Show');

                    }

          开发者_开发问答      );

            })
        .end()
        });

Thanks in advance for any help, hopefully it's something really simple I just can't see! :)

You can use $(this).is(":visible") inside the function to check whether its visible or not.

The jQuery toggle function is for assigning functions to execute when an event(mouse click) occurs. To actually fire an event, you will have to call the click function.

$('.dragbox-content').toggle(function() { 
        alert($(this).parent().attr("id") + ' Show');
    },function() { 
        alert($(this).parent().attr("id") + ' Hide');
    }
);

Use this piece of code to assign the function to be executed on click.

$(this).find('.hide-close').click(
function() {
    $(this).siblings('.dragbox-content').click();
})
.end();

and this to fire the event.