diff --git a/experiments/listview-accordion/jquery.mobile.listview.accordion.css b/experiments/listview-accordion/jquery.mobile.listview.accordion.css index 5e4831e93c8..47f9ea64644 100644 --- a/experiments/listview-accordion/jquery.mobile.listview.accordion.css +++ b/experiments/listview-accordion/jquery.mobile.listview.accordion.css @@ -1,5 +1,3 @@ .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 index a01e3bd33a1..88c2b13a605 100644 --- a/experiments/listview-accordion/jquery.mobile.listview.accordion.js +++ b/experiments/listview-accordion/jquery.mobile.listview.accordion.js @@ -1,6 +1,6 @@ /* * jQuery Mobile Framework : listview accordion extension -* Copyright (c) Boris Smus +* Copyright (c) Boris Smus, Christopher Liu * Note: Code is in draft form and is subject to change */ (function($, undefined ) { @@ -8,7 +8,13 @@ $( "[data-role='listview']" ).live( "listviewcreate", function() { var list = $( this ), listview = list.data( "listview" ); - + + var accordionExpandOne = function(accordion) { + // Close all other accordion flaps + list.find('.ui-li-accordion').slideUp(); + // Open this flap + accordion.slideToggle(); + } var accordionDecorator = function() { list.find('.ui-li-accordion').each(function(index, accordion) { // Format the accordion accordingly: @@ -29,23 +35,27 @@ $( "[data-role='listview']" ).live( "listviewcreate", function() { $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') { + // Check that the current flap isn't already open + if ($accordion.hasClass('ui-li-accordion-open')) { $accordion.slideUp(); - $(this).removeClass('ui-li-accordion-open'); + $accordion.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'); + // If not, clear old classes + list.find('.ui-li-accordion-open').removeClass('ui-li-accordion-open'); + $accordion.toggleClass('ui-li-accordion-open'); + accordionExpandOne($accordion); }); }); }; + var accordionExpandInitial = function() { + //Expand anything already marked with -open. + accordionExpandOne(list.find('.ui-li-accordion-open')); + }; accordionDecorator(); + accordionExpandInitial(); // Make sure that the decorator gets called on listview refresh too var orig = listview.refresh;