I've been working on something passed over to me by a more advanced developer than I am. (albeit he isn't great with spelling). What I'm trying to do is make it so that when a main category is clicked on, the list underneath it hides or shows. But is hidden initially.

His code has them all appear in an overall box, which succesfully hides and appears when clicked. So this is a list of categories within a box. If that makes sense. (A bit like the box on the left from yipit.com - clicking the header makes the links under it appear/disappear). So this is his code:

Code:
<!-- Box2 -->
    <div class="clsBox clsTags" id="catgories_list">
        <!-- Box Title -->
        <div class="clsBox_Tiitt">
            <a href="javascript:void(0)">Categories</a>
        </div>
        <!-- End of Box Title -->
        <!-- Box content -->
        <div class="clsBox_Cont">
            <p class="clsBoxoption"><a href="javascript:void(0)" id="sel_my_tags">My Tags</a> | <a href="javascript:void(0)" id="clear_all_tag">Clear</a> | <a id="save_tags" href="javascript:void(0)">Save</a></p>
            <a href="javascript:void(0)" id="sel_all_tags" style="color:#fff; font-size:16px; font-weight:bold;">Select All</a>
            <?php
                if(isset($users_category))
                {
                    $mytags=implode(",",$users_category);
                    echo '<input type="hidden" name="my_tags" value="'.$mytags.'" id="my_tags"/>';
                }

                $sub_cat_query='';

                $sub_cats=array();

                $sub_categories=array();

                $conditions=array();

                $output="";

                $checked='';

                if(isset($categories))
                {
                    foreach($categories as $category)
                    {
                        $output.='<div class="clsTags_Cont">
                                    <h3>'.ucfirst($category->name).'</h3>
                                    <ul id="sub_cat_of_'.$category->id.'">';
                        $conditions=array("parent_id"=>$category->id,"status"=>'1');

                        $sub_cat_query=$this->common_model->getTableData("sub_category",$conditions);

                        $sub_categories=$sub_cat_query->result();

                        foreach($sub_categories as $sub_category)
                        {
                            if(count($users_category)!=0)
                            {   
                                if(in_array($sub_category->id,$users_category))
                                    $checked='checked="checked"';
                                else
                                    $checked='';
                            }
                            else
                                $checked='';

                            $output.='<li><label><input type="checkbox" id="check_box_cat'.$category->id.'_'.$sub_category->id.'" name="check_box_cat[]" value="'.$sub_category->id.'" '.$checked.'>&nbsp;'.ucfirst($sub_category->name).'</label></li>';
                        }
                        $output.="<div class='clear'></div></ul></div>";
                    }
                }
                echo $output;
            ?>
        </div>
        <!-- box Content -->
    </div>
    <!-- End of Box2 -->
I believe the transition code to close and open that overall box is this:
Code:
$(".clsBox .clsBox_Tiitt").click(function(){
    var cur_id=$(this).parent().attr("id");
    $("#"+cur_id+" .clsBox_Cont").toggle();
    var class_name=$("#"+cur_id+" .clsBox_Tiitt").attr("class");
    if(class_name=="clsBox_Tiitt")
        $("#"+cur_id+" .clsBox_Tiitt").addClass("clsClsoe");
    else
        $("#"+cur_id+" .clsBox_Tiitt").removeClass("clsClsoe");
})
But I'm not really sure how to draw from that in order to open and close/transition the individual list of items under each category header. I know I have to adjust:
Code:
$output.='<div class="clsTags_Cont">
                                    <h3>'.ucfirst($category->name).'</h3>
                                    <ul id="sub_cat_of_'.$category->id.'">';
I suppose I have to put a special div at the front, and an inner div class before the ul bit, then close it off at the output.

But I'm a little overwhelmed as to how I would make it so that the actual hiding/showing bit appears and disappears.

Does this make sense? I'd really appreciate the help if somebody could direct me. I'm always learning! Thanks very much in advance.