Menú acordeón en JQuery UI

Accordion (menú acordeón)

Seguramente habrás visto en varias páginas web los menús de tipo acordeón. Con este widget de JQuery UI podrás crearlos de forma muy sencilla.

Algunas de sus propiedades son:

active: muestra o establece el panel activo.
disabled: permite desactivar el menú.
icons: ofrece la posibilidad de mostrar iconos en el menú.

En cuanto a sus métodos tenemos entre otros:

disable(): permite desactivar el menú.
enable(): activa el menú de encontrarse desactivado.

Consulta el enlace a su API que facilitamos para obtener más información. Veamos ahora un ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>InformaticaPC | Menú acordeón con JQuery UI</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">
        body { background-color:lightyellow;font-family:Arial;font-size:10pt; }
        #menu { width:200px; }
    </style>

    <!-- Observa que agregamos también la librería JQuery UI -->
    <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-ui-1.10.1.custom.min.js"></script>

    <!-- Agregamos también el archivo CSS del theme que usemos -->
    <link type="text/css" rel="stylesheet" href="../lib/css/smoothness/jquery-ui-1.10.1.custom.css" />

    <script type="text/javascript">

        $(document).ready(function()
        {
            // Mostrar las pestañas
            $("#menu").accordion();

            // Mostrar el segundo menú (las posiciones comienzan desde cero)
            $("#mostrar").click(function(){
                $("#menu").accordion( {active:1} );
            });

            // Desactivar los menúes 1 y 3
            $("#desactivar").click(function(){
                $("#menu").accordion( {disabled:true} );
            });
        });

    </script>
  </head>

  <body>

      <div id="menu">

            <h3><a href="#">Menú A</a></h3>
            <div>
                <a href="#">Opción A1</a><br />
                <a href="#">Opción A2</a><br />
                <a href="#">Opción A3</a>
            </div>

            <h3><a href="#">Menú B</a></h3>
            <div>
                <a href="#">Opción B1</a><br />
                <a href="#">Opción B2</a><br />
                <a href="#">Opción B3</a>
            </div>

            <h3><a href="#">Menú C</a></h3>
            <div>
                <a href="#">Opción C1</a><br />
                <a href="#">Opción C2</a><br />
                <a href="#">Opción C3</a>
            </div>

            <h3><a href="#">Menú D</a></h3>
            <div>
                <a href="#">Opción D1</a><br />
                <a href="#">Opción D2</a><br />
                <a href="#">Opción D3</a>
            </div>

      </div>

      <input type="button" id="mostrar" value="Mostrar la segunda opción" />
      <input type="button" id="desactivar" value="Desactivar el menú" />

  </body>

</html>

Ejemplo

Explicación: se trata de crear un 'DIV' principal que contendrá etiquetas HTML 'H3' (que se usarán para crear los elementos principales) así como otros 'DIV' con las opciones de cada uno de ellos.

Vea también: [ Accordion ] - [ Accordion (ejemplo) ]

Tutorial de JQuery

Accordion (menú acordeón)