Recently I had to transform a group of li elements into an accordion for a mobile version of a client website. So this is what I came up with.
I had an html that looked like this

Category1
  

    
Subcategory1
    
Subcategory2
  

Category2
  

    
Subcategory
    
Subcategory1
  

And I wanted to collapse all the subcategories on load leaving only the categories visible and when they click/touched each category subcategories will expand. So I wrote this script based off from Sam Croft script.

(function($){
  $.fn.accordion = function() {
    var el = this;
    var catHeight;
    catHeight = new Array();
    el.find('.category ul').each(function(i){
      var category = $(this);
      catHeight[i] = category.height();
      category.addClass('closed')
    });
      el.find('.category-header ').bind('touchstart', function(e) {
        e.preventDefault();
        var toExpand = $(this).next('ul');
        var i = toExpand.index('li ul');
        if (toExpand.attr('id') == 'active') {
          toExpand
          .removeAttr('id')
          .removeAttr('style')
          .addClass('closed');
        } else {
        var active = $('#active')
        if (active.length > 0) {
          active
          .removeAttr('id')
          .removeAttr('style')
          .addClass('closed');
        }
        toExpand
        .attr('id', 'active')
        .css('height', catHeight[i]+'px')
        .removeClass('closed');
      }
  });
}
})(jQuery);

And with this script I had to modify my html lists to look like this

Category1
  

    
Subcategory1
    
Subcategory2
  

Category2
  

    
Subcategory
    
Subcategory1
  

My css file

.closed {  height: 0; display:none;}
#active{display:block}

Usage

$(document).ready(function() {
  $('.list').accordion();
})

You can see a working example here.