Help needed with function

Hi everyone,

I’m trying to change the header text of a jQuery Mobile collapsible http://api.jquerymobile.com/collapsible/#option-heading depending upon whether it’s expanded or collapsed. If it is closed the header should read "show’; if open it should read ‘hide’. The code I’ve concocted only displays ‘show’, whether it is expanded or collapsed. I have to mention that I’m using multiple collapsibles on the same page, in case I need to use an “each” in the function.

Herewith the code:

$(document).on(“pagecreate”, “.main”, function () {
textchange();

function textchange(){
if ($(‘.ui-collapsible h5 a’).hasClass(‘ui-collapsible-heading-collapsed’))

{
$(‘.ui-collapsible h5 a’).text(‘show’);

} else {

$(‘.ui-collapsible h5 a’).text(‘hide’);

}
return false;
}
});

Could someone please help me? Thank you in advance.

PS: For some reason I can’t wrap code tags around the code.

Do you need to change the class too? At the moment it’s always collapsed.

Hi r51,

Well, jQuery Mobile automatically adds and removes classes. When the collapsible is closed/collapsed the div has 2 classes “ui-collapsible” and “ui-collapsible-collapsed”. When open/expanded it has one class “ui-collapsible”.

Here is a link to the collapsible demo:
http://demos.jquerymobile.com/1.4.3/collapsible/

At the bottom of the page is a demo “Pre-rendered markup” which the classes.

Thanks for your help!

You may need to attach your textChange handler to an event called when the state of the collapsible changes. Maybe a click event or an event fired by jQuery Mobile.

At the moment it looks like your code runs on ‘pageCreate’. Does that means it runs once when the page loads? If so, and if all the collapsibles start off collapsed, then they’ll all say ‘show’.

OK, thank you. Will look into that.

Cheers