Question

I love this functionality for large lists http://jquerymobile.com/demos/1.2.0/docs/lists/lists-nested.html

I’m going to have a list with over 1,000 line items. I will have it categorized in to parent/child lists.

For example, the initial list that is presented is a list of states in the US. Once they click on a state, like California, they should see only the sub-list items of California.

I can’t find any code to do this outside of jquery mobile.

Answer 1

So you want it to replace the list with the new one, or show in nested in the old one, I’d build it different for either case.

If you want it to replace the old one I’d go with something like this (using ajax to load sub lists if it’s really large). http://jsfiddle.net/Cmzwe/

HTML

<ul id="main">
  <li id="wa">Washington</li>
  <li id="or">Oregon</li>
  <li id="ca">California</li>
</ul>
<ul class="hidden" id="wa-list">
  <li>Everett</li>
  <li>Seattle</li>
  <li>Olympia</li>
</ul>
<ul class="hidden" id="or-list">
  <li>Portland</li>
  <li>Salem</li>
  <li>Beverton</li>
</ul>
<ul class="hidden" id="ca-list">
  <li>Reding</li>
  <li>Modesto</li>
  <li>Stockton</li>
</ul>

CSS

$('ul#main li').bind('click',function(){
  $('ul#main').addClass('hidden');
  $('ul#'+$(this).attr('id')+'-list').removeClass('hidden');
});

Javascript

$('ul#main li').bind('click',function(){
  $('ul#main').addClass('hidden');
  $('ul#'+$(this).attr('id')+'-list').removeClass('hidden');
});

If you want it nested then I’d do it more like this. http://jsfiddle.net/pKAQ8/

HTML

<ul id="main">
  <li id="wa">Washington</li>
  <li id="or">Oregon</li>
  <li id="ca">California</li>
</ul>
<ul class="hidden" id="wa-list">
  <li>Everett</li>
  <li>Seattle</li>
  <li>Olympia</li>
</ul>
<ul class="hidden" id="or-list">
  <li>Portland</li>
  <li>Salem</li>
  <li>Beverton</li>
</ul>
<ul class="hidden" id="ca-list">
  <li>Reding</li>
  <li>Modesto</li>
  <li>Stockton</li>
</ul>

CSS

ul.hidden{
  display:none;
}
ul.li{
  cursor:pointer;
}

Javascript

$('ul#main li').bind('click',function(){
  $('ul#main').addClass('hidden');
  $('ul#'+$(this).attr('id')+'-list').removeClass('hidden');
});

This are both very basic examples, I can expand on either one if you’d like, just let me know how you want it to work.

Obligatory Formatted Code, JSFiddle is easier for something like this.