diff --git a/docs/content/content-collapsible.html b/docs/content/content-collapsible.html
index 40dabef3..2e6496ba 100755
--- a/docs/content/content-collapsible.html
+++ b/docs/content/content-collapsible.html
@@ -39,16 +39,16 @@
 			</div>
 
 
-		<p>As the example notes, by default the content will be expanded. To collapse the content when the page loads, add the <code>data-state="collapsed"</code> attribute to the wrapper.</p>
+		<p>As the example notes, by default the content will be expanded. To collapse the content when the page loads, add the <code>data-collapsed="true"</code> attribute to the wrapper.</p>
 
 	<code>		
-	&lt;div data-role=&quot;collapsible&quot; <strong>data-state=&quot;collapsed&quot;&gt;</strong>
+	&lt;div data-role=&quot;collapsible&quot; <strong>data-collapsed=&quot;true&quot;&gt;</strong>
 	</code>
 
 		<p>This code will create a collapsible widget like this:</p>
 	
 
-			<div data-role="collapsible" data-state="collapsed">
+			<div data-role="collapsible" data-collapsed="true">
 				<h3>I'm a header</h3>
 				<p>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.</p>
 			</div>
@@ -58,19 +58,19 @@
 		<h2>Collapsible example</h2>
 		<p>This page has 4 collapsible containers with different types of content inside.</p>
 		
-		<div data-role="collapsible" data-state="collapsed">
+		<div data-role="collapsible" data-collapsed="true">
 			<h3>Section 1: Collapsed text block</h3>
-			<p>I'm closed when the page loads because I have the <code>data-state="collapsed"</code> attribute on my container. </p>
+			<p>I'm closed when the page loads because I have the <code>data-collapsed="true"</code> attribute on my container. </p>
 			<p>I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. </p>
 		</div><!-- /section 1 -->
 		
 		<div data-role="collapsible">
 			<h3>Section 2: Expanded on load</h3>
-			<p>I'm open when the page loads because I don't have the <code>data-state="collapsed"</code> attribute on my container. </p>
+			<p>I'm open when the page loads because I don't have the <code>data-collapsed="true"</code> attribute on my container. </p>
 			<p>I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content.</p>
 		</div><!-- /section 2 -->
 		
-		<div data-role="collapsible" data-state="collapsed">
+		<div data-role="collapsible" data-collapsed="true">
 			<h3>Section 3: Form elements</h3>
 			<form action="#" method="get">
 				<div data-role="fieldcontain">
@@ -88,7 +88,7 @@
 			</form>
 		</div><!-- /section 3 -->
 	
-		<div data-role="collapsible" data-state="collapsed">
+		<div data-role="collapsible" data-collapsed="true">
 			<h3>Section 4: Collapsed list</h3>
 			<ul data-role="listview" data-inset="true" data-theme="d">
 				<li><a href="index.html">Acura</a></li>
@@ -120,11 +120,11 @@
 				<h3>I'm a header in a set of collapsibles</h3>
 				<p>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.</p>
 			</div>
-			<div data-role="collapsible" data-state="collapsed">
+			<div data-role="collapsible" data-collapsed="true">
 				<h3>I'm a header in a set of collapsibles</h3>
 				<p>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.</p>
 			</div>
-			<div data-role="collapsible" data-state="collapsed">
+			<div data-role="collapsible" data-collapsed="true">
 				<h3>I'm a header in a set of collapsibles</h3>
 				<p>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.</p>
 			</div>
diff --git a/docs/content/content-themes.html b/docs/content/content-themes.html
index 7805c356..52a2b2b3 100755
--- a/docs/content/content-themes.html
+++ b/docs/content/content-themes.html
@@ -28,7 +28,7 @@
 		<p>To set the color of the collapsible header, add the <code>data-theme</code> attribute to the collapsible container. The icon and body are not currently themable through data attributes, but can be styled directly with custom css.</p>
 
 <code>		
-&lt;div data-role=&quot;collapsible&quot; data-state=&quot;collapsed&quot; <strong>data-theme=&quot;a&quot;&gt;</strong>
+&lt;div data-role=&quot;collapsible&quot; data-collapsed=&quot;true&quot; <strong>data-theme=&quot;a&quot;&gt;</strong>
 </code>
 		<h2>Themed examples</h2>
 		
@@ -36,7 +36,7 @@
 		<div class="ui-body ui-body-a">
 			<h1>H1 Heading</h1>
 			<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
-			<div data-role="collapsible" data-state="collapsed" data-theme="a">
+			<div data-role="collapsible" data-collapsed="true" data-theme="a">
 				<h3>I'm an themed collapsible</h3>
 				<p>I have <code>data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
 			</div><!-- /collapsible -->
@@ -46,7 +46,7 @@
 		<div class="ui-body ui-body-b">
 			<h1>H1 Heading</h1>
 			<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
-			<div data-role="collapsible" data-state="collapsed" data-theme="b">
+			<div data-role="collapsible" data-collapsed="true" data-theme="b">
 				<h3>I'm an themed collapsible</h3>
 				<p>I have <code>data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
 			</div><!-- /collapsible -->
@@ -56,7 +56,7 @@
 		<div class="ui-body ui-body-c">
 			<h1>H1 Heading</h1>
 			<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
-			<div data-role="collapsible" data-state="collapsed" data-theme="c">
+			<div data-role="collapsible" data-collapsed="true" data-theme="c">
 				<h3>I'm an themed collapsible</h3>
 				<p>I have <code>data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
 			</div><!-- /collapsible -->
@@ -66,7 +66,7 @@
 		<div class="ui-body ui-body-d">
 			<h1>H1 Heading</h1>
 			<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
-			<div data-role="collapsible" data-state="collapsed" data-theme="d">
+			<div data-role="collapsible" data-collapsed="true" data-theme="d">
 				<h3>I'm an themed collapsible</h3>
 				<p>I have <code>data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
 			</div><!-- /collapsible -->
@@ -76,7 +76,7 @@
 		<div class="ui-body ui-body-e">
 			<h1>H1 Heading</h1>
 			<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
-			<div data-role="collapsible" data-state="collapsed" data-theme="e">
+			<div data-role="collapsible" data-collapsed="true" data-theme="e">
 				<h3>I'm an themed collapsible</h3>
 				<p>I have <code>data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
 			</div><!-- /collapsible -->
diff --git a/js/jquery.mobile.collapsible.js b/js/jquery.mobile.collapsible.js
index 5b486eea..8bfd7178 100644
--- a/js/jquery.mobile.collapsible.js
+++ b/js/jquery.mobile.collapsible.js
@@ -4,23 +4,24 @@
 * Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
 * Note: Code is in draft form and is subject to change 
 */ 
-(function($){
-$.fn.collapsible = function(options){
-	return $(this).each(function(){
-		var o = $.extend({
-			expandCueText: ' click to expand contents',
-			collapseCueText: ' click to collapse contents',
-			collapsed: $(this).is('[data-state="collapsed"]'),
-			heading: '>h1,>h2,>h3,>h4,>h5,>h6,>legend',
-			theme: $(this).data('theme'),
-			iconTheme: $(this).data('icontheme') || 'd'
-		},options);
+(function ( $ ) {
+$.widget( "mobile.collapsible", $.mobile.widget, {
+	options: {
+		expandCueText: ' click to expand contents',
+		collapseCueText: ' click to collapse contents',
+		collapsed: false,
+		heading: '>:header,>legend',
+		theme: undefined,
+		iconTheme: 'd'
+	},
+	_create: function(){
 
-		//define
-		var collapsibleContain = $(this).addClass('ui-collapsible-contain'),
-			collapsibleHeading = $(this).find(o.heading).eq(0),
+		var $el = this.element,
+			o = this.options,
+			collapsibleContain = $el.addClass('ui-collapsible-contain'),
+			collapsibleHeading = $el.find(o.heading).eq(0),
 			collapsibleContent = collapsibleContain.wrapInner('<div class="ui-collapsible-content"></div>').find('.ui-collapsible-content'),
-			collapsibleParent = $(this).closest('[data-role=collapsible-set]').addClass('ui-collapsible-set');				
+			collapsibleParent = $el.closest('[data-role="collapsible-set"]').addClass('ui-collapsible-set');				
 		
 		//replace collapsibleHeading if it's a legend	
 		if(collapsibleHeading.is('legend')){
@@ -141,6 +142,6 @@ $.fn.collapsible = function(options){
 			return false;
 		});
 			
-	});	
-};	
-})(jQuery);
\ No newline at end of file
+	}
+});
+})( jQuery );
\ No newline at end of file