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