Autodividers listview with collapsable option

Question

I am working on a listview which has auto dividers based on date it is a very long list & data-autodividers='true' works fine but I want to further improve it by making the listview collapsible on date.

This can be done from back-end using c# (I am working on an asp.net webform mobile website) where I group my list based on Month-Year and make each group collapsible.

But I would love to do it with jQuery as I do for autodivider . I have set up same on jsFiddle.

http://jsfiddle.net/5PnBT/10/

How can I make these auto-divider collapsible using jQuery without doing it from code-behind file (c#)?

I did not see where jquerymobile has this as a build in option.

$(document).on("pageinit", "#page-wrapper", function () {
    $("#hp-latest-articles").listview({
        autodividers: true,
        autodividersSelector: function (li) {
            var out = li.attr('date');
            return out;
        }
    }).listview('refresh');
});

Answer 1

If I have understood your problem, I think you just have to use the $.mobile.listview.prototype.options.autodividersSelector option. I had a similar problem, so if you need to list them according to the date attribute on the single element, do:

 $( document ).on( "mobileinit", function() {
  $.mobile.listview.prototype.options.autodividersSelector = function( element )       {
    return (element.attr('date'))       

  };
});

I prepared a jsbin for that: http://jsbin.com/enuwoj/1/edit

Answer 2

There are two solutions to your problem.

1. Either you use the collapsible list sets on the jQuery Mobile side, then you will be able to reach exactly what you are looking for. You might nee to edit the looks of the element using CSS to make it look like a listview.

http://jsfiddle.net/rc9Gk/

     <div data-role="collapsible">
        <h3>Title</h3>
             <ul><li>Item1</li><li>Item2</li></ul>
     </div>

1. Second solution would be to apply custom event handlers on click event of the listview control. Whenever a click event occurs on a list divider you can hide the following list elements till the next auto-divider. This solution needs a bit of coding. If this solution fits you, I can write that code for you do let me know.

Answer 3

I believe your problem is solved by adding the following to the bottom of your original fiddle

$('.ui-li-divider').click( function(ev ){
  var li = $(ev.target).next(':not(.ui-li-divider)');
  while ( li.length > 0 ) {
      li.toggle();
      li = li.next(':not(.ui-li-divider)');
  }
});

Here is the updated jsFiddle

Basically, everytime you click a divider, it looks for all following LIs until the next divider and toggles their visibility.

Answer 4

You'll need either <div data-role="collapsible"> or <div data-role="collapsible-set"> , depending on if you wanted to group them or not.

If you want them pre-collapsed by default, include the data-collapsed="true" attribute as well.