Jquery Mobile: Dynamically change the text of the header of a collapsible div?

Question

    
Place:
    

         


        

Answer 1

The actual HTML structure of a collapsible in jQuery Mobile 1.0RC2 is the following (after the framework has made its pass on the HTML):

    

        
            
                Place:
                     click to expand contents
                
                
            
        
    
    

        
    

The nested element within the element makes this a little tricky. If you want to preserve the structure of the element you will need to save the nested element, overwrite it, and then replace it:

//run code on document.ready
$(function () {
    var num = 1;
    //add click handler to link to increment the collapsible's header each click
    $('a').bind('click', function () {
        //cache the `` element and its child
        var $btn_text  = $('#collapsePlace').find('.ui-btn-text'),
            $btn_child = $btn_text.find('.ui-collapsible-heading-status');
        //overwrite the header text, then append its child to restore the previous structure
        $btn_text.text('New String (' + num++ + ')').append($btn_child);
    });
});

Here is a jsfiddle of the above solution: http://jsfiddle.net/jasper/4DAfn/2/