From fd6d7b52f24ab370e4fcbc7c9e3024f0b856d6ca Mon Sep 17 00:00:00 2001
From: scottjehl <scott@scottjehl.com>
Date: Tue, 12 Oct 2010 16:36:32 -0400
Subject: [PATCH] rafactored the buttons in collapsibles. uses an inner button
 for styling the icons.

---
 _form-controls.html               |  2 +-
 css/jquery.mobile.collapsible.css | 11 +++++++----
 js/jquery.mobile.collapsible.js   | 32 +++++++++++++++++++++++--------
 3 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/_form-controls.html b/_form-controls.html
index 0294b0f2..3a1004a7 100644
--- a/_form-controls.html
+++ b/_form-controls.html
@@ -20,7 +20,7 @@
 
 	<form action="#" method="get">
 		
-	<div data-role="collapsible" data-state="collapsed">
+	<div data-role="collapsible" data-state="collapsed" data-theme="b" data-icontheme="a">
 		<h1>Demo description</h1>
 		<p>This page contains various progressive-enhancement driven form controls. Native elements are sometimes hidden from view, but their values are maintained so the form can be submitted normally. In theory, browsers that don't support the custom controls will still get a usable experience.</p>
 		
diff --git a/css/jquery.mobile.collapsible.css b/css/jquery.mobile.collapsible.css
index 49b6245e..ee134aa3 100644
--- a/css/jquery.mobile.collapsible.css
+++ b/css/jquery.mobile.collapsible.css
@@ -3,10 +3,13 @@
 * Copyright (c) jQuery Project
 * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
 */
-.ui-collapsible-contain { margin: 0 0 -1px;  border-left-width: 0; border-right-width: 0; overflow: hidden; }
+.ui-collapsible-contain {  }
 .ui-collapsible-heading { font-size: 16px; display: block; margin: 0; padding: 0; border-width: 0 0 1px 0; position: relative; }
-.ui-collapsible-heading a { padding: .7em 15px; text-align: left; margin: 0; text-decoration: none; outline: 0; border: 0; display: block; }
-.ui-collapsible-heading .ui-icon { position: absolute; right: 5px; top: 50%; margin-top: -9px; }
+.ui-collapsible-heading a { text-align: left; margin: 1em 0 0;  }
+.ui-collapsible-heading a .ui-btn-inner { padding-left: 40px; }
+.ui-collapsible-heading a span.ui-btn { position: absolute; left: 6px; top: 50%; margin: -12px 0 0 0; width: 20px; height: 20px; padding: 1px 0px 1px 2px; text-indent: -9999px; }
+.ui-collapsible-heading a span.ui-btn .ui-btn-inner { padding: 0; }
+.ui-collapsible-heading a span.ui-btn .ui-icon { left: 2px; }
 .ui-collapsible-heading-status { position:absolute; left:-99999px; }
-.ui-collapsible-content {  overflow:hidden; display: block; }
+.ui-collapsible-content {  overflow:hidden; display: block; padding: 15px 0; }
 .ui-collapsible-content-collapsed { display: none; }
\ No newline at end of file
diff --git a/js/jquery.mobile.collapsible.js b/js/jquery.mobile.collapsible.js
index 8fb76adb..0d902c59 100644
--- a/js/jquery.mobile.collapsible.js
+++ b/js/jquery.mobile.collapsible.js
@@ -8,17 +8,18 @@
 $.fn.collapsible = function(options){
 	return $(this).each(function(){
 		var o = $.extend({
-			containerTheme: 'ui-body-c',
 			expandCueText: ' click to expand contents',
 			collapseCueText: ' click to collapse contents',
 			collapsed: $(this).is('[data-state="collapsed"]'),
-			heading: '>h1,>h2,>h3,>h4,>h5,>h6,>legend'
+			heading: '>h1,>h2,>h3,>h4,>h5,>h6,>legend',
+			theme: $(this).data('theme'),
+			iconTheme: $(this).data('icontheme') || 'c'
 		},options);
 
 		//define
-		var collapsibleContain = $(this).addClass('ui-collapsible-contain '+o.containerTheme),
+		var collapsibleContain = $(this).addClass('ui-collapsible-contain'),
 			collapsibleHeading = $(this).find(o.heading).eq(0),
-			collapsibleContent = collapsibleContain.wrapInner('<div class="ui-collapsible-content ui-body"></div>').find('.ui-collapsible-content');				
+			collapsibleContent = collapsibleContain.wrapInner('<div class="ui-collapsible-content"></div>').find('.ui-collapsible-content');				
 		
 		//replace collapsibleHeading if it's a legend	
 		if(collapsibleHeading.is('legend')){
@@ -30,11 +31,26 @@ $.fn.collapsible = function(options){
 		collapsibleHeading.insertBefore(collapsibleContent);
 		
 		//modify markup & attributes
-		collapsibleHeading.addClass('ui-collapsible-heading  ui-bar-c') //NOTE - THIS SHOULD USE A BODY CLASS
+		collapsibleHeading.addClass('ui-collapsible-heading')
 			.append('<span class="ui-collapsible-heading-status"></span>')
-			.wrapInner('<a href="#" class="ui-collapsible-heading-toggle"></a>');
-		
-		collapsibleHeading.find('a:eq(0)').prepend('<span class="ui-icon ui-icon-shadow"></span>').addClass('ui-link');	
+			.wrapInner('<a href="#" class="ui-collapsible-heading-toggle"></a>')
+			.find('a:eq(0)')
+			.buttonMarkup({
+				shadow: true,
+				corners:true,
+				iconPos: 'left',
+				icon: 'plus',
+				theme: o.theme
+			})
+			.find('.ui-icon')
+			.removeAttr('class')
+			.buttonMarkup({
+				shadow: true,
+				corners:true,
+				iconPos: 'notext',
+				icon: 'plus',
+				theme: o.iconTheme
+			});
 		
 		//events
 		collapsibleContain