# Accordions (/es/components/accordions)
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)
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.
## Accordion individual [#accordion-individual]
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!");
}
}
```
````mdx title="Accordion example"
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!");
}
}
```
````
## Grupos de Accordion [#grupos-de-accordion]
Agrupa acordeones relacionados usando ``. Esto crea una sección coherente de acordeones que se pueden expandir o contraer individualmente.
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!");
}
}
```
Añade iconos para que los acordeones sean más distintivos visualmente y fáciles de recorrer de un vistazo.
Mantén el contenido relacionado organizado en grupos.
````mdx title="Accordion Group Example"
Puedes incluir otros componentes dentro de los Accordion.
```java HelloWorld.java
class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
```
Añade iconos para hacer que los accordion sean más distintivos visualmente y fáciles de revisar.
Mantén el contenido relacionado organizado en grupos.
````
## Propiedades [#propiedades]
Título en la vista previa del Accordion.
Detalle debajo del título en la vista previa del Accordion.
Indica si el Accordion se abre de forma predeterminada.
Un ID personalizado para el Accordion usado para enlaces de anclaje. Si se omite, usa de forma predeterminada el mismo valor que `title`.
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 `` del campo de salida de JSX.
4. Envuelve el código SVG compatible con JSX entre llaves: `icon={}`.
5. Ajusta `height` y `width` según sea necesario.
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`.