collapsible javascript list

collapsible javascript list

I'm just starting to learn JavaScript and have been playing around with jQuery. I'm trying to make a collapsible list. I've got part of it working and am having trouble getting the rest to work. I'm using a unordered list, if you click on Category 1 or Subcategory 1 it works exactly as I want them to but none of the others work. I sure I need some kind of array to get the others working, but I'm not sure where to start? Can anyone point me in the right direction? Is there a better way to do this?
Oh and this list is queried from a database so Categories, Subcategories, Items will vary, but this is the basic structure.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<style type="text/css">
.list {
   background-color:#FFFFFF;
   color:#000000;
}

.list ul{
   padding:0;
   margin:0;
   list-style-type:none;
}

.list li{
   position:relative;
   list-style-type:none;
   width:300px;
}

.list ul li ul li ul li{
   padding:0px 25px;
}

.list li a{
   float:right;
}

#header1 {
   display:block;
   background-color:#990000;
   color:#FFFFFF;
   font-weight:bold;
   width:300px;
   padding:2px 10px;
   cursor:pointer;
}
#header2 {
   display:block;
   background-color:#000000;
   color:#FFFFFF;
   width:300px;
   padding:2px 10px;
   cursor:pointer;
}

</style>

<script type="application/javascript">

window.onload = function(){
   $("#item").hide();
}

$(document).ready(function(){
   $("#header1").click(function(){
      $("#subcat").slideToggle("slow");
   });
   $("#header2").click(function(){
      $("#item").slideToggle("slow");
   });
});
   
   
</script>

<div class='list'>List 1</span>
    <ul>
        <li><span id='header1'>Category 1</span>
            <ul id='subcat'>
                <li><span id='header2'>Subcategory 1</span>
                    <ul id='item'>
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                        <li>Item 4</li>
                        <li>Item 5</li>
                    </ul>
                </li>
                <li><span id='header2'>Subcategory 2</span>
                    <ul id='item'>
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                        <li>Item 4</li>
                        <li>Item 5</li>
                    </ul>
                </li>
                <li><span id='header2'>Subcategory 3</span>
                    <ul id='item'>
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                        <li>Item 4</li>
                        <li>Item 5</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><span id='header1'>Category 2</span>
            <ul id='subcat'>
                <li><span id='header2'>Subcategory 1</span>
                    <ul id='item'>
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                        <li>Item 4</li>
                        <li>Item 5</li>
                    </ul>
                </li>
                <li><span id='header2'>Subcategory 2</span>
                    <ul id='item'>
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                        <li>Item 4</li>
                        <li>Item 5</li>
                    </ul>
                </li>
                <li><span id='header2'>Subcategory 3</span>
                    <ul id='item'>
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                        <li>Item 4</li>
                        <li>Item 5</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
[/code]