Replace Button Text during .click() Function

Question

I have a hidden Textbox. If I click a button, the content of a div appears. If I click the Buutton again, the content disappears (.slideToggle()): I would like to replace the text of my button, if the content of the div is visible and change it back, if the button gets clicked again and the content of the DIV, better: the DIV gets hidden. That is my current Coce:

function show_content(){
    jQuery('.single_content').hide();
    jQuery('.css_hide').show();
    jQuery('.show_content').click(function(){
        jQuery('.single_content').slideToggle();
        var text = jQuery(this).html();
        if ( jQuery('.single_content').is(':visible') ) {
            jQuery(this).html('abc');   
        }
    });
}

What did I do wrong?

Many Thanks

Town · Accepted Answer · 2011-04-15 15:33:05Z

2

As a button is an input element, you need to set the value to update the text:

jQuery(this).val('abc');

answered Apr 15, 2011 at 15:33

Town

14.9k3 gold badges50 silver badges72 bronze badges

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

Comments

effkay · Accepted Answer · 2011-04-15 15:33:37Z

2

try something like:

function show_content(){
jQuery('.single_content').hide();
jQuery('.css_hide').show();
jQuery('.show_content').click(function(){
    jQuery('.single_content').slideToggle();
    var text = jQuery(this).html();
    if ( jQuery('.single_content').is(':visible') ) {
    jQuery(this).attr('value','ABC');   
    }
});

answered Apr 15, 2011 at 15:33

effkay

8542 gold badges18 silver badges36 bronze badges

Comments

Mutation Person · Accepted Answer · 2011-04-15 16:03:10Z

0

You code should look something like:

function show_content(){
    $('.single_content').hide();
    $('.css_hide').show();
    var text = "";
    $('.show_content').click(function(){
        var $this = $(this);
        var $single_content = $('.single_content');

        $single_content.slideToggle();

        if ( $single_content.is(':visible') ) {
            $this.val('abc');   
            text = j$this.val();
        }
        else{
            $this.val(test);   
        }
    });
}

Here I've used $ for brevity and cached some objects

edited Apr 15, 2011 at 16:03

answered Apr 15, 2011 at 15:38

Mutation Person

30.6k18 gold badges102 silver badges166 bronze badges

2 Comments

Carmen Over a year ago

I am using a span as button. So I need to use .html(). BTW it still does not work :(...

Carmen Over a year ago

I tried the ed. Version. Still the same result: The div shows up, the Text of the span changes. If I click the span again, the div shall hide - it does, but the html of the span does not change. Explanation: YOu click the span which says: show content. Of course, the span text makes no sense, if the content is shown. So the text shall change to 'hide text'. If I clicked it, and the text is hidden, the span content shall be again something like 'show text'....

Collectives™ on Stack Overflow

Replace Button Text during .click() Function

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related