> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.manicule.dev/es/llms.txt
> Use this file to discover all available pages before exploring further.
> For every page in one file, fetch https://mintlify.manicule.dev/es/llms-full.txt (large).
> To search and read these docs as tools, connect the MCP server at https://mintlify.manicule.dev/api/mcp.
> Every agent surface: https://mintlify.manicule.dev/.well-known/llms-manifest.json

# Accordions (/es/components/accordions)

<!-- agent-signals: reading_time_min: 3 · est_tokens: 1178 · updated: 2026-07-31 -->
Related: [Insignia](/es/components/badge.md), [Banner](/es/components/banner.md), [Avisos](/es/components/callouts.md), [Tarjetas](/es/components/cards.md), [Grupos de código](/es/components/code-groups.md), [Color](/es/components/color.md)

> Usa el componente accordion para mostrar y ocultar secciones, organizar información relacionada y habilitar la revelación progresiva en tus docs.

Accordion permite a los usuarios expandir y contraer secciones de contenido. Usa Accordion para la revelación progresiva y para organizar la información.

Cuando abres un accordion, el hash de la URL se actualiza, lo que te permite compartir enlaces directos a secciones específicas del accordion.

<div id="single-accordion">
  ## Accordion individual
</div>

<Accordion title="Soy un Accordion.">
  Puedes poner cualquier contenido aquí, incluidos otros componentes, como código:

  ```java title="HelloWorld.java"
   class HelloWorld {
       public static void main(String[] args) {
           System.out.println("Hello, World!");
       }
   }
  ```
</Accordion>

````mdx title="Accordion example"
<Accordion title="Soy un Accordion.">
  Puedes poner cualquier contenido aquí, incluyendo otros componentes, como código:

   ```java HelloWorld.java
    class HelloWorld {
        public static void main(String[] args) {
            System.out.println("¡Hola, Mundo!");
        }
    }
  ```
</Accordion>
````

<div id="accordion-groups">
  ## Grupos de Accordion
</div>

Agrupa acordeones relacionados usando `<AccordionGroup>`. Esto crea una sección coherente de acordeones que se pueden expandir o contraer individualmente.

<AccordionGroup>
  <Accordion title="Primeros pasos">
    Puedes incluir otros componentes dentro de los Accordion.

    ```java title="HelloWorld.java"
    class HelloWorld {
        public static void main(String[] args) {
            System.out.println("Hello, World!");
        }
    }
    ```
  </Accordion>

<Accordion title="Funciones avanzadas" icon="bot">Añade iconos para que los acordeones sean más distintivos visualmente y fáciles de recorrer de un vistazo.</Accordion>

<Accordion title="Solución de problemas">Mantén el contenido relacionado organizado en grupos.</Accordion>
</AccordionGroup>

````mdx title="Accordion Group Example"
<AccordionGroup>
  <Accordion title="Primeros pasos">
    Puedes incluir otros componentes dentro de los Accordion.

    ```java HelloWorld.java
    class HelloWorld {
        public static void main(String[] args) {
            System.out.println("Hello, World!");
        }
    }
    ```
  </Accordion>

  <Accordion title="Funciones avanzadas" icon="alien-8bit">
    Añade iconos para hacer que los accordion sean más distintivos visualmente y fáciles de revisar.
  </Accordion>

  <Accordion title="Solución de problemas">
    Mantén el contenido relacionado organizado en grupos.
  </Accordion>
</AccordionGroup>
````

<div id="properties">
  ## Propiedades
</div>

<ResponseField name="title" type="string" required>Título en la vista previa del Accordion.</ResponseField>

<ResponseField name="description" type="string">Detalle debajo del título en la vista previa del Accordion.</ResponseField>

<ResponseField name="defaultOpen" type="boolean" default="false">Indica si el Accordion se abre de forma predeterminada.</ResponseField>

<ResponseField name="id" type="string">Un ID personalizado para el Accordion usado para enlaces de anclaje. Si se omite, usa de forma predeterminada el mismo valor que `title`.</ResponseField>

<ResponseField name="icon" type="string">
  El ícono que se mostrará.

  Opciones:

  * Nombre del ícono de [Font Awesome](https://fontawesome.com/icons), si tienes la [propiedad](/es/organize/settings#param-icons) `icons.library` configurada como `fontawesome` en tu `docs.json`
  * Nombre del ícono de [Lucide](https://lucide.dev/icons), si tienes la [propiedad](/es/organize/settings#param-icons) `icons.library` configurada como `lucide` en tu `docs.json`
  * Nombre del ícono de [Tabler](https://tabler.io/icons), si tienes la [propiedad](/es/organize/settings#param-icons) `icons.library` configurada como `tabler` en tu `docs.json`
  * URL de un ícono alojado externamente
  * Ruta a un archivo de ícono en tu proyecto
  * Código SVG envuelto entre llaves

  Para íconos SVG personalizados:

  1. Convierte tu SVG con el [convertidor de SVGR](https://react-svgr.com/playground/).
  2. Pega tu código SVG en el campo de entrada de SVG.
  3. Copia el elemento completo `<svg>...</svg>` del campo de salida de JSX.
  4. Envuelve el código SVG compatible con JSX entre llaves: `icon={<svg ...> ... </svg>}`.
  5. Ajusta `height` y `width` según sea necesario.
</ResponseField>

<ResponseField name="iconType" type="string">
  El estilo de ícono de [Font Awesome](https://fontawesome.com/icons). Solo se usa con íconos de Font Awesome.

  Opciones: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ResponseField>