diff --git a/experiments/listview-accordion/jquery.mobile.listview.accordion.css b/experiments/listview-accordion/jquery.mobile.listview.accordion.css
new file mode 100644
index 00000000000..5e4831e93c8
--- /dev/null
+++ b/experiments/listview-accordion/jquery.mobile.listview.accordion.css
@@ -0,0 +1,5 @@
+.ui-li-accordion {
+ height:171px;
+ background-color: #000000;
+ display: none;
+ position: relative;}
diff --git a/experiments/listview-accordion/jquery.mobile.listview.accordion.js b/experiments/listview-accordion/jquery.mobile.listview.accordion.js
new file mode 100644
index 00000000000..a01e3bd33a1
--- /dev/null
+++ b/experiments/listview-accordion/jquery.mobile.listview.accordion.js
@@ -0,0 +1,58 @@
+/*
+* jQuery Mobile Framework : listview accordion extension
+* Copyright (c) Boris Smus
+* Note: Code is in draft form and is subject to change
+*/
+(function($, undefined ) {
+
+$( "[data-role='listview']" ).live( "listviewcreate", function() {
+ var list = $( this ),
+ listview = list.data( "listview" );
+
+ var accordionDecorator = function() {
+ list.find('.ui-li-accordion').each(function(index, accordion) {
+ // Format the accordion accordingly:
+ //
...normal stuff in a jQM li
+ // ...contents of this
+ //
+ // If we find an accordion element, make the li action be to open the accordion element
+ // console.log('accordion found ' + accordion);
+ // Get the li
+ var $accordion = $(accordion);
+ $li = $accordion.closest('li');
+ // Move the contents of the accordion element to the end of the
+ $li.append($accordion.clone());
+ $accordion.remove();
+ // Unbind all click events
+ $li.unbind('click');
+ // Remove all a elements
+ $li.find('a').remove();
+ // Bind click handler to show the accordion
+ $li.bind('click', function() {
+ // Check that the current flap isn't already open
+ var $accordion = $(this).find('.ui-li-accordion');
+ if ($accordion.css('display') != 'none') {
+ $accordion.slideUp();
+ $(this).removeClass('ui-li-accordion-open');
+ return;
+ }
+ // Close all other accordion flaps
+ list.find('.ui-li-accordion').slideUp();
+ // Open this flap
+ $accordion.slideToggle();
+ $(this).toggleClass('ui-li-accordion-open');
+ });
+ });
+ };
+
+ accordionDecorator();
+
+ // Make sure that the decorator gets called on listview refresh too
+ var orig = listview.refresh;
+ listview.refresh = function() {
+ orig.apply(listview, arguments[0]);
+ accordionDecorator();
+ };
+});
+
+})( jQuery );
diff --git a/experiments/listview-category/jquery.mobile.listview.category.css b/experiments/listview-category/jquery.mobile.listview.category.css
new file mode 100644
index 00000000000..6531ec0603e
--- /dev/null
+++ b/experiments/listview-category/jquery.mobile.listview.category.css
@@ -0,0 +1 @@
+.ui-li-listview {display: none; position: relative;}
diff --git a/experiments/listview-category/jquery.mobile.listview.category.js b/experiments/listview-category/jquery.mobile.listview.category.js
new file mode 100644
index 00000000000..2a9c144f431
--- /dev/null
+++ b/experiments/listview-category/jquery.mobile.listview.category.js
@@ -0,0 +1,29 @@
+/*
+* jQuery Mobile Framework : "listview" filter extension
+* Copyright (c) jQuery Project
+* 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($, undefined ) {
+
+$.mobile.listview.prototype.options.category = false;
+
+$( "[data-role='listview']" ).live( "listviewcreate", function() {
+ var list = $( this );
+ var category = list.find("[data-role='category-filter']");
+ if (!category.length) {
+ return;
+ }
+
+ category.find('select').change(function() {
+ var val = $(this).val();
+ list.children().show();
+ if ( val ) {
+ list.children('li[data-category]').filter(function() {
+ return $( this ).attr('data-category') != val;
+ }).hide();
+ }
+ });
+});
+
+})( jQuery );