CODEWITHSUNDEEP
jquery-mobile
user1692333
user1692333

Reputation: 2597

How to dynamically change data-theme in JQM for collapsible?

I need to do this action on button click, which is in the collapsible, so i do it like:

my_button.closest('div[data-theme="b"]').find('a.ui-btn-up-b').toggleClass('ui-btn-up-b ui-btn-up-d');

But unfortunately there still remains some styles which needs to be changed, but i don't know which...

Upvotes: 1

Views: 1202

Answers (1)

Omar
Omar

Reputation: 31732

Updated answer

Since the dynamic solution doesn't work for collapsible, here is a manual solution.

Working demo

Code

$('#button').on('click', function () {
 var oldclass = 'ui-btn-up-b ui-body-b';
 var newclass = 'ui-btn-up-d ui-body-d';
 $('[data-role=collapsible]').find('a').removeClass(oldclass  + ' ui-btn-hover-b').addClass(newclass + ' ui-btn-hover-d');
 $('[data-role=collapsible]').find('.ui-collapsible-content').removeClass(oldclass).addClass(newclass);
});

Why collapsible data-theme cant be changed dynamically?

Old answer

Unfortunately, the below dynamic solution surprisingly doesn't work.

Where .selector is the ID of the Collapsible.

$('button').on('click', function () {

 // change the theme
 $( ".selector" ).collapsible( "option", "theme", "a" );

 // apply new styles
 $( ".selector" ).collapsible().trigger('create');

});

Upvotes: 3

Related Questions