jQuery - slideToggle() and Toggle Text

Question

I have a contact form that can be hidden using .slideToggle() but I want the tab used to Toggle the form to change text based on wether the form is in view or hidden.

Here is the jQuery:

$("#slider").click(function() {
  $("#form_wrap").animate({ opacity: 1.0 },200).slideToggle();
});

I want the text of #slider to read 'Hide' then 'Show'.

Any help appreciated!

Godolphin

Answer 1

Something like this would work:

$("#slider").click(function() {
  $("#form_wrap").animate({ opacity: 1.0 },200).slideToggle(500, function() {
    $("#slider").text($(this).is(':visible') ? "Hide" : "Show");
  });
});

I assume here the tab you're clicking #slider is what you want to change the text of, your question confuses me a bit on that part. Once the animation is complete, this sets the text of the button depending on the visibility state of #form_wrap at the end.

Octave