Make this css code into collapsible/expandable list

This is my code. I want to convert or change/add this css code to collapsible/expandable list for categories without changing their names of the classes & id's names. As Main Category bullet/bullet image must be used to create collapsible/expandable list to its under all sub categories. All Main Categories & Sub-Categories should have their respective hyperlinks

Do not change the look of it. If possible add to that class or id.

<style type='text/css'>
#directory .catcol ul{list-style-type:none; padding:10px 8px}
#directory .catcol{float:left; width:33%}
#directory .catcol ul.maincat-list{}
#directory .catcol ul li.maincat { border-bottom:1px solid #DDDDDD; font-weight:bold; padding:0 0 2px; text-transform:uppercase; margin-bottom:15px; }
#directory .catcol ul li.maincat a{text-decoration:none;}
#directory .catcol li.maincat > ul.subcat-list { border-top:1px solid #DDDDDD; border-bottom:1px solid #FFFFFF; margin-bottom:-3px; padding-bottom:8px; }
#directory .catcol ul.subcat-list{padding:5px;}
#directory .catcol ul li.cat-item{font-weight:normal; text-transform:none; background:transparent url(images/bullet-grey.png) no-repeat scroll 4px 6px; line-height:20px; padding:0 0 0 12px}
#directory .catcol ul li.cat-item a{text-decoration:none; color:#545454;}
#directory .catcol ul li.maincat a:hover, #directory .catcol ul li.cat-item a:hover{text-decoration:underline}
#directory .catcol ul li{line-height:20px; padding:5px 0 2px 10px; text-shadow:0 1px 0 #FFFFFF;}
#directory .catcol ul li.cat-item:hover{}
#directory .catcol ul.children {list-style-type:none; padding:5px 0; margin:0 0 -10px -12px;}
#directory .catcol ul.children li {background:transparent url(images/bullet-grey.png) no-repeat scroll 12px 11px; border-bottom:none; border-top:1px solid #EFEFEF;}
#directory .catcol ul.children li a {margin-left:8px;}
#directory.twoCol .catcol { width: 50%; }
</style>

<div id="directory" class="directory twoCol">
<div class="catcol  first">
    <ul class="maincat-list">
        <li class="maincat cat-item-32"><a href="http://example.com/automobiles/" title="">Automobiles</a>
            <ul class="subcat-list"><li class="cat-item cat-item-33"><a href="http://example.com/cat/automobiles/cars/" title="">Cars</a></li></ul>
        </li>
        <li class="maincat cat-item-37"><a href="http://example.com/cat/home-lifestyle/" title="">Home &amp; Lifestyle</a>
            <ul class="subcat-list"><li class="cat-item cat-item-38"><a href="http://example.com/cat/home-lifestyle/clothing/" title="">Clothing</a></li></ul>
        </li>
        <li class="maincat cat-item-2"><a href="http://example.com/cat/misc/" title="">Misc</a>  </li></ul>
</div><!-- /catcol -->

<div class="catcol ">
    <ul class="maincat-list">
        <li class="maincat cat-item-8"><a href="http://example.com/cat/mobiles-phones/" title="">Mobiles Phones</a>
            <ul class="subcat-list"><li class="cat-item cat-item-9"><a href="http://example.com/cat/mobiles-phones/phones/" title="">Phones</a></li></ul>
        </li>
        <li class="maincat cat-item-13"><a href="http://example.com/cat/office-shops-space/" title="">Office / Shops / Space</a></li></ul>

</div><!-- /catcol -->
<div class="clr"></div>
</div>

HTML:

Anyone plzz...help me!!