点击时jQuery展开列表不展开

I am stuck on this script. Basically I have unknown amount of categories (20-50) and they are displayed on a sidebar one on top of the other. I want to show 10, then when I push a button, it will expand to show the rest. I have the 10 exposed with the remaining amount closed in a div called cathide. So when I push the button to show, it should expand but it is not.

PHP code generates the list, displays 10 categories, then echos

<div class="cathide">

then it displays the remaining amount and then echos

</div>

That is how the reamining is enclosed in a div.

Here are the codes..

PHP

if ( $all_categories ) {
$count = 1;

foreach ( $all_categories as $cid => $arr ) {
    $sidebar .= '<a href="index.php?action=sort&cid=' . $cid . '">' . $arr['name'] . ' (' . $arr['count'] . ')</a><br />';

    if ( 10 == $count ) {
        $sidebar .= '<div class="cathide">';
    }

    $count++;
}
$sidebar1 .= '</div>';

} else {
$sidebar = 'There are no categories yet';
}

CSS

.cathide {
    display:none;
}

jQuery

$("#showAll").click(function () {
$("cathide").slideDown(500);
$(this).hide();
});

$("#hide").click(function () {
$("cathide").slideUp(500, function () {
    $("#showAll").show();
});

});

HTML

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="tab">
Categories
</td>
</tr>
<tr>
<td class="trow2">

{$sidebar} // Used to call 10 cats then div class=cathide then remaining cats

{$sidebar1} // Used to call /div
<input type="button" value="Show all" id="showAll" />
<input type="button" value="Hide" id="hide" />

</td>
</tr>
</table>

As said above, you're missing the window.onload listener so you need to do this:

$(window).ready( function() { 

    $("#showAll").click(function () {
       $(".cathide").slideDown(500);
       $(this).hide();
    });

   $("#hide").click(function () {
       $(".cathide").slideUp(500, function () {
    $("#showAll").show();
    });

});