jQuery text() change on toggle()?

Question

I want to make a script that is changing toggle link text depending on others element visibility.

So while #form is visible I want the #form-container a text to be "Hide...", and while it's hidden I want the text to be "Show...".

I've tried this line - if($('#form').is(":visible")){ another way: if($('#form').is(":visible") == "true"){ - but it also doesn't work.

What's wrong? How to change text every time another item is toggled?

$('.toggle').click(
    function()
    {
        $('#form').slideToggle();

            if($('#form').is(":visible")){
                $('#form-container a').text("Hide form container");
            }
            else {
                $('#form-container a').text("Show form container");  
            } 
    });

Thanks.

Nick Craver · Accepted Answer · 2010-08-12 21:09:01Z

14

It'll always be visible while animating, you can check the visibility in the .slideToggle() callback so it checks when it finishes animating, like this:

$('.toggle').click(function() {
  $('#form').slideToggle(function() {
    $('#form-container a').text(
      $(this).is(':visible') ? "Hide form container" : "Show form container"
    );
  });
});

answered Aug 12, 2010 at 21:09

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

2 Comments

bat Over a year ago

Thanks, it works. But why it always be visible WHILE animating? I look at my code and it should be already shown/hidden before if statement?

Nick Craver Over a year ago

@bat - You're calling the .slideToggle() before the check, so when it's showing it just started being shown, it's barely visible, but it is :visible. When you're closing it, it takes time to animate (400ms), so it's still closing when the check runs...in either case, it's :visible, make sense?

Ignacio · Accepted Answer · 2010-08-12 21:05:28Z

0

You can use toggle on the form element.

$("#form").slideToggle(
  function () {
    //Hide
  },
  function () {
    //Show
  }
);

source: http://api.jquery.com/toggle/

answered Aug 12, 2010 at 21:05

Ignacio

8,06515 gold badges65 silver badges74 bronze badges

1 Comment

hsuk Over a year ago

the mentioned syntax is for toggle, not for slidetoggle

Collectives™ on Stack Overflow

jQuery text() change on toggle()?

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related