Coldfusion + Javascript Question about Lists

Hi Folks,

I have a query below that outputs a list of cities.

<UL id="list">
<cfoutput query="getresults" group="City_ID" >

<LI><a href="somepage.cfm?City_ID=#City_ID#">#Cityname#</a></LI>

 </cfoutput>

</UL>

[RESULT]

Amstad
Alron
Adderson
Belleview
Banneris
Brentwood
Charstone
Cimbran
..
...
...
Zanker


I am wondering if if were possible to use javascript combined such that the output will look like that below:

[Desired Output]
A
B
C
..
..
Z

The desired output above shows the list like a simple alphabatized list, and when the user clicks on the letter A, the list will 'expand' and will show all the cities starting with 'A' as seen below:

A
Amstad
Alron
Adderson

B
C
D
.
..
Z

I have searched high and low around the internet and saw someone use a javascript code like such below to make an alphabatized list.....but I am not familiar with javascript and cannot seem to get it to work. In addition, I am hoping to make it work as an 'expanding' list as examplified above.

It would be awesome if someone could help me make this a reality! Thanks so much!

[Javascript code below]


var list = { letters: [] };    //object to collect the li elements and a list of initial letters
$("#list").children("li").each(function(){
    var itmLetter = $(this).text().substring(0,1).toUpperCase();
    if (!(itmLetter in list)) {
        list[itmLetter] = [];
        list.letters.push(itmLetter);
    }
    list[itmLetter].push($(this));    //add li element to the letter's array in the list object
});
 
list.letters.sort();    //sort all available letters to iterate over them
$.each(list.letters, function(i, letter){
    list[letter].sort(function(a, b) {
        return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());    //sort li elements of one letter
    });
    var ul = $("<ul/>");    //create new dom element and add li elements
    $.each(list[letter], function(idx, itm){
        ul.append(itm);
    });
    $("#list").append($("<li/>").append($("<a/>").attr("name", letter.toLowerCase()).addClass("title").html(letter)).append(ul));    //add the list to a new li and to #list ul
});