HTML结构

<div class="box">
    <div class="list">
        <p class="active">分类名1</p>
        <p>分类名2</p>
    </div>
    <div class="item">
        <div class="item-list cur">
            <p>子分类1</p>
            <p>子分类2</p>
            <p>子分类3</p>
            <p>子分类4</p>
            <p>子分类5</p>
        </div>
        <div class="item-list">
            <p>子分类1</p>
            <p>子分类2</p>
            <p>子分类3</p>
            <p>子分类4</p>
            <p>子分类5</p>
        </div>
    </div>
</div>

javascript

var list_li = $('.list p');
list_li.click(function(){
    $(this).addClass('active').siblings().removeClass('active');
    var index = list_li.index(this);
    $('.item .item-list').eq(index).addClass('cur').siblings().removeClass('cur');
});

当前，点击list里的分类名就会像tab一样切换，点击那个分类名，显示当前点击分类下的子分类。想要实现的效果是不仅可以切换，还有就是，如果item-list里的p标签如果大于2，就会隐藏当前显示的其它子分类，并在最后插入一个全部（如果其它子分类小于或等于2则不会插入全部字样），当点击全部后展开当前显示分类下所有子分类，并把全部改为展开，再点击这个展开会收起来又只显示2个子分类。请问用JQUERY该如何实现？非常感谢！~