html - このCSSコードを折りたたみ/展開可能なリストに変換したい

Question

これは私のコードです。クラスの名前とIDの名前を変更せずに、このcssコードをカテゴリの折りたたみ可能/展開可能なリストに変換または変更/追加したい。メイン カテゴリの箇条書き/箇条書きの画像を使用して、すべてのサブカテゴリの下に折りたたみ可能/展開可能なリストを作成する必要があります。

外観を変更しないでください。可能であれば、そのクラスまたは 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>

プルズ...助けて!!