Response title
This is preview!
Move this topic
Open/Close all in collapsible content markup
in jQuery Mobile
•
12 years ago
How could you dynamically open/close all items that are collapsed using data-role="collapsible"?
1
Replies(2)
Re: Open/Close all in collapsible content markup
12 years ago
Don't know if its the best way, but here is what I did.
function openCloseAll(){
if($('h3').hasClass('ui-collapsible-heading-collapsed')){
$('h3').removeClass('ui-collapsible-heading-collapsed');
$('div').find('.ui-collapsible-content').removeClass('ui-collapsible-content-collapsed').attr('aria-hidden',false);
}else{
$('h3').addClass('ui-collapsible-heading-collapsed');
$('div').find('.ui-collapsible-content').addClass('ui-collapsible-content-collapsed').attr('aria-hidden',true);
}
return false;
}
Leave a comment on slick540's reply
Re: Open/Close all in collapsible content markup
11 years ago
I used the following code to open/close all collapsibles when user tapholds on one of them (collapsibles have both an 'collapse' as an 'expand' event, which can be triggered:
- $('.myCollapsibleHeader').bind('taphold', function(){
- var collapse;
- var tappedHeader = jQuery(this);
- if($(this).hasClass('ui-collapsible-heading-collapsed')) {
- $('h3.ui-collapsible-heading-collapsed').each(function(){
- collapse = false;
- jQuery(this).trigger('expand');
- });
- } else {
- $('h3:not(.ui-collapsible-heading-collapsed)').each(function() {
- collapse = true;
- jQuery(this).trigger('collapse');
- });
- }
- //close the tapped header
- tappedHeader.one('tap', function(){
- if (collapse==true) {
- jQuery(this).trigger('collapse');
- } else {
- jQuery(this).trigger('expand');
- }
- })
- })
Leave a comment on koosvdkolk's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to slick540's question