Question

I have a function that I call on a buttons onclick event called “toggleCollapse”. I want to change the innet text of the button from “Collapse” to “Expand” when clicked. The code below does that but also loses all the jquery mobile styleing of the button in the process. How can I refresh the styling of the button without having to reload the entire page, I just want to refresh the buttons styling nothing else.

<a data-role="button" data-mini="true" data-icon="grid" iconpos="right" onclick="toggleCollapse()">Collapse</a>

function toggleCollapse() {
    var a = $("#collapse_value")
                .attr("value");
    var b;
    if (a == "false") {

        $("#btnCollapse").html("Expand");

        b = true
    } else {

        $("#btnCollapse").html("Collapse");

    }


    $('#btnCollapse').button();

}

Answer 1

Since you want to “change the innet text of the button from Collapse to Expand when clicked”, why not use the .text() function instead of the .html() function.

The .html() function maps to the innerHTML property.

The .text() function maps to the innerText property.

function toggleCollapse() {
    var a = !! $('#collapse_value').val(); //use !! to convert value to a boolean
    $('#btnCollapse').text(a ? 'Expand' : 'Collapse');
}

This should replace the text label for the button without affecting the style, however you may instead want to use the .button() method for changing the button label (since you appear to be using the jQuery UI buttons). Here’s an example:

function toggleCollapse() {
    var a = !! $('#collapse_value').val(); //use !! to convert value to a boolean
    $('#btnCollapse').button('option', 'label', a ? 'Expand' : 'Collapse');
}