panel的展开，关闭的一种应用。

js:

<script type="text/javascript">
    $('#p2').panel({
        title: 'panel1',
        closable: false,
        collapsible: true,
        border: false,
        collapsed: true,
        //href: "url",
        onOpen: function () {
            $($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
        },
        onBeforeCollapse: function () {
            $($(this).panel('header')).removeClass('openPanelClass');
        },
        onBeforeExpand: function () {
            $($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
        }

    });
    $($('#p2')).panel('header').click(function () {
        $('#p2').panel('expand', true);
        $('#p2').panel('collapse', true);
    });
    $('#p3').panel({
        title: 'panel2',
        closable: false,
        collapsible: true,
        border: false,
        collapsed: true,
        //href: "url",
        onOpen: function () {
            $($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
        },
        onBeforeCollapse: function () {
            $($(this).panel('header')).removeClass('openPanelClass');
        },
        onBeforeExpand: function () {
            $($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
        }
    });
    $($('#p3')).panel('header').click(function () {
        $('#p3').panel('expand', true);
        $('#p3').panel('collapse', true);
    });
    $('#p4').panel({
        title: 'panel3',
        closable: false,
        collapsible: true,
        border: false,
        collapsed: true,
        //href: "url",
        onOpen: function () {
            $($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
        },
        onBeforeCollapse: function () {
            $($(this).panel('header')).removeClass('openPanelClass');
        },
        onBeforeExpand: function () {
            $($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
        }
    });
    $($('#p4')).panel('header').click(function () {
        $('#p4').panel('expand', true);
        $('#p4').panel('collapse', true);
    });
    $('#p5').panel({
        title: 'panel4',
        closable: false,
        collapsible: true,
        border: false,
        collapsed: true,
        //href: "url",
        onOpen: function () {
            $($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
        },
        onBeforeCollapse: function () {
            $($(this).panel('header')).removeClass('openPanelClass');
        },
        onBeforeExpand: function () {
            $($(this).panel('header')).addClass('openPanel').addClass('openPanelClass');
        }
    });
    $($('#p5')).panel('header').click(function () {
        $('#p5').panel('expand', true);
        $('#p5').panel('collapse', true);
    });
</script>

 

html:

　　

    <div style="margin: 5px">
        <div id="p2" style="width: 985px;">
            1111111111
        </div>
    </div>
    <div style="margin: 5px">
        <div id="p3" style="width: 985px;">
            2222222222
        </div>
    </div>
    <div style="margin: 5px">
        <div id="p4" style="width: 985px;">
            3333333333
        </div>
    </div>
    <div style="margin: 5px">
        <div id="p5" style="width: 985px;">
            44444444444
        </div>
    </div>