Replace Button Text during .click() Function

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 = jQue开发者_如何学运维ry(this).html();
        if ( jQuery('.single_content').is(':visible') ) {
            jQuery(this).html('abc');   
        }
    });
}

What did I do wrong?

Many Thanks

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

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

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');   
    }
});

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