jQuery EasyUI Layout -Crear panel Acordeón

En este tutorial, aprenderá sobre el panel Acordeón (Accordion) de easyui. El panel Acordeón (Accordion) contiene una serie de paneles (panel). Los encabezados (header) de todos los paneles (panel) son visibles, pero solo se muestra el contenido del body de un panel (panel) a la vez. Cuando el usuario hace clic en el encabezado (header) de un panel (panel), el contenido del body de ese panel (panel) será visible, mientras que el contenido del body de los demás paneles (panel) quedará oculto.

Crearemos tres paneles (panel), el tercer panel (panel) contiene un menú de árbol.

    <div class="easyui-accordion" style="width:300px;height:200px;">
        <div title="About Accordion" iconCls="icon-ok" style="overflow:auto;padding:10px;">
            <h3 style="color:#0099FF;">Accordion for jQuery</h3>
            <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
        </div>
        <div title="About easyui" iconCls="icon-reload" selected="true" style="padding:10px;">
            easyui help you build your web page easily
        </div>
        <div title="Tree Menu">
            <ul id="tt1" class="easyui-tree">
                <li>
                    <span>Folder1</span>
                    <ul>
                        <li>
                            <span>Sub Folder 1</span>
                            <ul>
                                <li><span>File 11</span></li>
                                <li><span>File 12</span></li>
                                <li><span>File 13</span></li>
                            </ul>
                        </li>
                        <li><span>File 2</span></li>
                        <li><span>File 3</span></li>
                    </ul>
                </li>
                <li><span>File2</span></li>
            </ul>
        </div>
    </div>

Descargar ejemplos de jQuery EasyUI

jeasyui-layout-accordion.zip