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

rahul · Accepted Answer · 2010-06-14 10:23:16Z

1

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

answered Jun 14, 2010 at 10:23

rahul

188k50 gold badges239 silver badges266 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Christopher Over a year ago

Fantastic :) to test I've used this.. if($(this).is(":hidden")) { alert($(this).parent().attr("id") + ' is now hidden.'); } Working perfectly, thanks for your help!

vsr · Accepted Answer · 2010-06-14 10:38:03Z

0

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.

answered Jun 14, 2010 at 10:38

vsr

3,2281 gold badge21 silver badges14 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related