mintlify__docs/es/components/accordions.mdx

---
title: "Accordions"
description: "Usa el componente de accordion para mostrar y ocultar secciones de contenido, organizar información relacionada y habilitar la revelación progresiva en tus documentos."
keywords: ["accordions", "collapsible content", "expandable sections", "progressive disclosure"]
---

import IconsOptional from "/snippets/es/icons-optional.mdx";

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

````mdx 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 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 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>

<IconsOptional />