CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Lorraine Bernard
Lorraine Bernard

Reputation: 13400

jquery toggle state

I am trying to swaps text to original text in a button by using twiter-bootstrap.

Here is the documentation:

$().button('reset'); 
// Resets button state - swaps text to original text.

$().button(string)
// Resets button state - swaps text to any data defined text state.

Reference: http://twitter.github.com/bootstrap/javascript.html#buttons

Here is my code (1) and here is my demo on jsfidlle http://jsfiddle.net/D2RLR/2646/

As you can see when I try to click on the button it changes text as expected. Then when I try to click again it does not change text.
How should I fix my code?

(1)

var buttonElement = $(document.createElement('button'));

buttonElement.text('hide');
buttonElement.attr('data-complete-text', 'show');

buttonElement.on('click', function (event) {
    $('.alert').toggle(function () {
            buttonElement.button('complete');
            // buttonElement.button('reset');
        }
    );
});

$('body').append(buttonElement);
​

Upvotes: 1

Views: 688

Answers (3)

Pablo
Pablo

Reputation: 380

Try the following js code:

var buttonElement = $(document.createElement('button'));

buttonElement.text('hide');

buttonElement.on('click', function (event) {
    $('.alert').toggle(function () {
        if ($(this).is(':hidden')) {
            buttonElement.text('show');
        } else {
            buttonElement.text('hide');
        }
    });
});

$('body').append(buttonElement);

Upvotes: 1

Shmiddty
Shmiddty

Reputation: 13967

This works, but I'm not sure if there's a better way to accomplish this.

http://jsfiddle.net/Shmiddty/D2RLR/2651/

var buttonElement = $(document.createElement('button'));

buttonElement.text('hide');
buttonElement.attr('data-complete-text', 'show');
buttonElement.attr('data-default-text', 'hide');
buttonElement.on('click', function(event) {
    $('.alert').toggle(function() {
        buttonElement.button($(this).is(':visible') ? 'default' : 'complete');
    });
});

$('body').append(buttonElement);​

Ah, there is a better way: http://jsfiddle.net/Shmiddty/D2RLR/2655/

var buttonElement = $(document.createElement('button'));

buttonElement.text('hide');
buttonElement.attr('data-complete-text', 'show');
buttonElement.on('click', function(event) {
    $('.alert').toggle(function() {
        buttonElement.button($(this).is(':visible') ? 'reset' : 'complete');
    });
});

$('body').append(buttonElement);​

​

Upvotes: 3

dorgan
dorgan

Reputation: 135

Based on your code sample above. Keep in mind toggle takes multiple functions that it will "toggle" through.

var buttonElement = $(document.createElement('button'));

buttonElement.text('hide');
buttonElement.attr('data-complete-text', 'show');

buttonElement.on('click', function (event) {
    $('.alert').toggle(function () {
            buttonElement.button('complete');
        },
        function() {
           buttonElement.button('reset');
        }
    );
});

$('body').append(buttonElement);
​

Upvotes: 0

Related Questions