in my item post page, their is an for selecting main category and than after selecting it shows relevant sub category. i want to change this in to a accordion. please help me how to change this. so when a user come to my website and try to post ad he should be shown accordion for selecting the main category and sub category. please help me to achieve this by modify the code or using java-script to achieve this.

the code `

    $categoryID = Params::getParam('catId');
    if( osc_item_category_id() != null ) {
        $categoryID = osc_item_category_id();
    }

    if( Session::newInstance()->_getForm('catId') != '' ) {
        $categoryID = Session::newInstance()->_getForm('catId');
    }

    $subcategoryID = '';
    if( !Category::newInstance()->isRoot($categoryID) ) {
        $subcategoryID = $categoryID;
        $category      = Category::newInstance()->findRootCategory($categoryID);
        $categoryID    = $category['pk_i_id'];
    }

    if($categories == null) {
        if(View::newInstance()->_exists('categories')) {
            $categories = View::newInstance()->_get('categories');
        } else {
            $categories = osc_get_categories();
        }
    }

    if ($item == null) { $item = osc_item(); }

    $subcategory = array();
    ?>
<select id="parentCategory" name="parentCatId">
    <option value=""><?php _e('Select a category', 'modern'); ?></option>
    <?php foreach($categories as $_category) {
    $selected = ( (isset($item["fk_i_category_id"]) && $item["fk_i_category_id"] == $_category['pk_i_id']) || (isset($categoryID) && $categoryID == $_category['pk_i_id']) );
    if($selected) { $subcategory = $_category; };
    echo '<option value="'.$_category['pk_i_id'].'" '.($selected ? 'selected="selected"' : '' ).'>'.$_category['s_name'].'</option>';
} ?>
</select>
<select id="catId" name="catId">
    <?php
    if(!empty($subcategory)) {
        if( count($subcategory['categories']) > 0 ) {
            echo '<option value="">'.__('Select Subcategory', 'modern').'</option>'; 
            foreach($subcategory['categories'] as $c) {
                $selected = ( (isset($item["fk_i_category_id"]) && $item["fk_i_category_id"] == $c['pk_i_id']) || (isset($subcategoryID) && $subcategoryID == $c['pk_i_id']) );
                echo '<option value="'.$c['pk_i_id'].'" '.($selected ? 'selected="selected"' : '' ).'>'.$c['s_name'].'</option>';
            }
        } else {
            echo '<option value="'.$categoryID.'" >'._e('No Subcategory', 'modern').'</option>';
        }
    } else {
        echo '<option value="">'._e('Select Subcategory', 'modern').'</option>';
    }
    ?>
</select>
<script type="text/javascript" charset="utf-8">
        <?php
        foreach($categories as $c) {
            if( count($c['categories']) > 0 ) {
                $subcategory = array();
                for($i = 0; $i < count($c['categories']); $i  ) {
                    $subcategory[] = array($c['categories'][$i]['pk_i_id'], $c['categories'][$i]['s_name']);
                }
                printf('var categories_%1$s = %2$s;', $c['pk_i_id'], json_encode($subcategory));
                echo PHP_EOL;
            }
        }
        ?>
    $(document).ready(function(){
        $("#parentCategory").bind('change', function(){
            var categoryID = $(this).val();
            if( categoryID == 0 ) {
                var options = '<option value="'   categoryID   '" selected=""><?php _e('No Subcategory', 'modern'); ?></option>';
            }
            categories = window['categories_'   categoryID];
            if( categories==null || !$.isArray(categories) ) {
                var options = '<option value="'   categoryID   '" selected=""><?php _e('No Subcategory', 'modern'); ?></option>';
            } else {
                var options = '<option value="'   categoryID   '" selected=""><?php _e('Select Subcategory', 'modern'); ?>...</option>';
                $.each(categories, function(index, value){
                    options  = '<option value="'   value[0]   '">'   value[1]   '</option>';
                });
            };
            $('#catId').html(options);
            $("#catId").next("a").find(".select-box-label").text('Select a Sub Category...');
            $("#catId").change();
            $("div#uniform-catId.selector").css('visibility', 'visible');
        });

         // In case of error and Category already chosen, let's show the Subcategory selector
        if($("div#uniform-parentCategory.selector select").val()) {
            $("div#uniform-catId.selector").css('visibility', 'visible');
        }
    });

</script>
<?php
}

?>`