diff --git a/docs/content/content-collapsible.html b/docs/content/content-collapsible.html index 78e4123a..0a6ad70d 100755 --- a/docs/content/content-collapsible.html +++ b/docs/content/content-collapsible.html @@ -101,8 +101,33 @@ +

Nested Collapsibles

+
+

I'm a header

+

I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.

+
+

I'm a nested collapsible header

+

I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.

+
+
+

Collapsible sets

+

By giving a parent element a data-role of collapsible-set, you can cause other collapsibles within that parent to close whenever a new one is opened, acting like an accordion widget:

+
+
+

I'm a header in a set of collapsibles

+

I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.

+
+
+

I'm a header in a set of collapsibles

+

I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.

+
+
+

I'm a header in a set of collapsibles

+

I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.

+
+
diff --git a/js/jquery.mobile.collapsible.js b/js/jquery.mobile.collapsible.js index c2eddeef..5b486eea 100644 --- a/js/jquery.mobile.collapsible.js +++ b/js/jquery.mobile.collapsible.js @@ -19,7 +19,8 @@ $.fn.collapsible = function(options){ //define var collapsibleContain = $(this).addClass('ui-collapsible-contain'), collapsibleHeading = $(this).find(o.heading).eq(0), - collapsibleContent = collapsibleContain.wrapInner('
').find('.ui-collapsible-content'); + collapsibleContent = collapsibleContain.wrapInner('
').find('.ui-collapsible-content'), + collapsibleParent = $(this).closest('[data-role=collapsible-set]').addClass('ui-collapsible-set'); //replace collapsibleHeading if it's a legend if(collapsibleHeading.is('legend')){ @@ -36,17 +37,12 @@ $.fn.collapsible = function(options){ .wrapInner('') .find('a:eq(0)') .buttonMarkup({ - shadow: true, + shadow: !!!collapsibleParent.length, corners:false, iconPos: 'left', icon: 'plus', theme: o.theme }) - .removeClass('ui-btn-corner-all') - .addClass('ui-corner-all') - .find('.ui-btn-inner') - .removeClass('ui-btn-corner-all') - .addClass('ui-corner-all') .find('.ui-icon') .removeAttr('class') .buttonMarkup({ @@ -56,35 +52,91 @@ $.fn.collapsible = function(options){ icon: 'plus', theme: o.iconTheme }); + + if( !collapsibleParent.length ){ + collapsibleHeading + .find('a:eq(0)') + .addClass('ui-corner-all') + .find('.ui-btn-inner') + .addClass('ui-corner-all'); + } + else { + if( collapsibleContain.data('collapsible-last') ){ + collapsibleHeading + .find('a:eq(0), .ui-btn-inner') + .addClass('ui-corner-bottom'); + } + } + //events collapsibleContain - .bind('collapse', function(){ - collapsibleHeading - .addClass('ui-collapsible-heading-collapsed') - .find('.ui-collapsible-heading-status').text(o.expandCueText); - - collapsibleHeading.find('.ui-icon').removeClass('ui-icon-minus').addClass('ui-icon-plus'); - collapsibleContent.addClass('ui-collapsible-content-collapsed').attr('aria-hidden',true); + .bind('collapse', function(event){ + if( !event.isDefaultPrevented() ){ + event.preventDefault(); + collapsibleHeading + .addClass('ui-collapsible-heading-collapsed') + .find('.ui-collapsible-heading-status').text(o.expandCueText); + + collapsibleHeading.find('.ui-icon').removeClass('ui-icon-minus').addClass('ui-icon-plus'); + collapsibleContent.addClass('ui-collapsible-content-collapsed').attr('aria-hidden',true); + + if( collapsibleContain.data('collapsible-last') ){ + collapsibleHeading + .find('a:eq(0), .ui-btn-inner') + .addClass('ui-corner-bottom'); + } + } }) - .bind('expand', function(){ - collapsibleHeading - .removeClass('ui-collapsible-heading-collapsed') - .find('.ui-collapsible-heading-status').text(o.collapseCueText); - - collapsibleHeading.find('.ui-icon').removeClass('ui-icon-plus').addClass('ui-icon-minus'); - collapsibleContent.removeClass('ui-collapsible-content-collapsed').attr('aria-hidden',false); - + .bind('expand', function(event){ + if( !event.isDefaultPrevented() ){ + event.preventDefault(); + collapsibleHeading + .removeClass('ui-collapsible-heading-collapsed') + .find('.ui-collapsible-heading-status').text(o.collapseCueText); + + collapsibleHeading.find('.ui-icon').removeClass('ui-icon-plus').addClass('ui-icon-minus'); + collapsibleContent.removeClass('ui-collapsible-content-collapsed').attr('aria-hidden',false); + + if( collapsibleContain.data('collapsible-last') ){ + collapsibleHeading + .find('a:eq(0), .ui-btn-inner') + .removeClass('ui-corner-bottom'); + } + + } }) .trigger(o.collapsed ? 'collapse' : 'expand'); + + //close others in a set + if( collapsibleParent.length && !collapsibleParent.data("collapsiblebound") ){ + collapsibleParent + .data("collapsiblebound", true) + .bind("expand", function( event ){ + $(this).find( ".ui-collapsible-contain" ) + .not( $(event.target).closest( ".ui-collapsible-contain" ) ) + .not( "> .ui-collapsible-contain .ui-collapsible-contain" ) + .trigger( "collapse" ); + }) + var set = collapsibleParent.find('[data-role=collapsible]') + + set.first() + .find('a:eq(0)') + .addClass('ui-corner-top') + .find('.ui-btn-inner') + .addClass('ui-corner-top'); + + set.last().data('collapsible-last', true) + } + collapsibleHeading.click(function(){ if( collapsibleHeading.is('.ui-collapsible-heading-collapsed') ){ - collapsibleContain.triggerHandler('expand'); + collapsibleContain.trigger('expand'); } else { - collapsibleContain.triggerHandler('collapse'); + collapsibleContain.trigger('collapse'); } return false; }); diff --git a/themes/default/jquery.mobile.collapsible.css b/themes/default/jquery.mobile.collapsible.css index 1985b184..5d89e050 100644 --- a/themes/default/jquery.mobile.collapsible.css +++ b/themes/default/jquery.mobile.collapsible.css @@ -12,4 +12,7 @@ .ui-collapsible-heading a span.ui-btn .ui-icon { left: 0; margin-top: -10px; } .ui-collapsible-heading-status { position:absolute; left:-99999px; } .ui-collapsible-content { display: block; padding: 10px 0 10px 8px; } -.ui-collapsible-content-collapsed { display: none; } \ No newline at end of file +.ui-collapsible-content-collapsed { display: none; } + +.ui-collapsible-set { margin: .5em 0; } +.ui-collapsible-set .ui-collapsible-contain { margin: -1px 0 0; } \ No newline at end of file