Change Swatch of Collapsible in runtime

[Aeneas McBurney]

Whats the js command to change the swatch on a collapsible at runtime?

Thanks in advance!

[Yurii Orishchuk]

Hi Aeneas,

Unfortunalty collapsible JQM component currently not supports theme change with JS.

But here is workaround for you.

Please use following code:

pre

Code: Select all

 //You can change here goal swatch. 
 var goalSwatch = "a"; 

 //Note: you need to replace "mobilecollapsblock_2" with your collapsible component name. 
 var collapsibleBlock = Appery("mobilecollapsblock_2"); 

 //Change swatch for header: 
 var headerClasses = 'ui-btn-a ui-btn-b ui-btn-c ui-btn-d'; 
 var headerGoalClass =  "ui-btn-" + goalSwatch; 

 var headerButton = collapsibleBlock.find(".ui-collapsible-heading .ui-btn"); 
 headerButton.removeClass(headerClasses); 

 headerButton.addClass(headerGoalClass); 

 //Change swatch for content: 
 var contentClasses = 'ui-body-a ui-body-b ui-body-c ui-body-d'; 
 var contentGoalClass =  "ui-body-" + goalSwatch; 

 var content = collapsibleBlock.find(".ui-collapsible-content"); 
 content.removeClass(contentClasses); 

 content.addClass(contentGoalClass); 

/pre

Regards.