CODEWITHSUNDEEP
jquery-mobile
user481610
user481610

Reputation: 3270

jQuery Mobile .toggle() not working

I'm currently using jQuery Mobile and simply wish to hide and show certain divs every time I click on a button. Here is my code:

$('#SignUpLink').click(function() 
            {
                    $('#signinputup').toggle('normal',function() {
                      $('#signinput').hide('fast');
                    }, function() {
                      $('#signinput').show('fast');
                    });
            });

I simlply want to click on the SignUpLink button and want the signinput to appear and make signinput disappear and then when I click on SignUpLink I want the inverse to happen. But with the given code above I get the following error:

Uncaught TypeError: Property 'function () {
                      $('#signinput').hide('fast');
                    }' of object #<Object> is not a function

I'm not sure what the error means and how to fix the code to obtain the functionality I'm looking for

Upvotes: 0

Views: 1440

Answers (2)

omma2289
omma2289

Reputation: 54619

Try it like this, just make sure the second element is hidden beforehand

$('#SignUpLink').click(function() {
    $('#signinput, #signinputup').toggle();
});

Upvotes: 1

Jonathan Naguin
Jonathan Naguin

Reputation: 14766

Check the syntax of the toggle function. It has four different ways of call:

  1. Two parameters:

     .toggle( [duration ] [, complete ] )

    Where duration is a number or string and complete a function.

  2. One parameter:

     .toggle( options )

    Where options is a object with the configuration.

  3. Three parameters:

     .toggle( duration [, easing ] [, complete ] )

    Where easing is a string.

  4. One parameter:

     .toggle( showOrHide )

    Where showOrHide is a boolean.

In your code you are calling with three parameters, which is wrong because it doesn't match with any of this:

 $('#signinputup').toggle('normal', /*ONE*/
                   function() {$('#signinput').hide('fast');}, /*TWO*/
                   function() {$('#signinput').show('fast');}  /*THREE??*/
 );

Upvotes: 1

Related Questions