This is my code

HTML Code:
<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>
As shown in code, there are two columns(catcol first & catcol classes) of Categories. I want Collapsible/ Expandable Menu for this code like Main Category(maincat cat-item-X) bullet image or any pointer should be used to create Collapsible/ Expandable menu for Sub Category(subcat-list). It's columns, class names & its hyperlinks must not be changed.

Plzz..guys..help me.!!