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

Question

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! :)

Answer 1

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

Answer 2

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.