> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-mintlify-add-i-to-quickstart-8818.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Acordeones
> Componentes desplegables para mostrar y ocultar contenido
Los acordeones permiten a los usuarios expandir y contraer secciones de contenido. Utiliza acordeones para la revelación progresiva y para organizar la información.
## Acordeón individual
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!");
}
}
```
````mdx Ejemplo de acordeón
Puedes incluir cualquier contenido aquí, incluso otros componentes, como código:
```java HelloWorld.java
class HelloWorld {
public static void main(String[] args) {
System.out.println("¡Hola, mundo!");
}
}
```
````
## Grupos de acordeones
Agrupa acordeones relacionados usando ``. Esto crea una sección coherente de acordeones que se pueden expandir o contraer individualmente.
Puedes colocar otros componentes dentro de los acordeones.
```java HelloWorld.java
class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
```
Agrega íconos para que los acordeones sean más distintivos visualmente y fáciles de explorar.
Mantén el contenido relacionado organizado en grupos.
````mdx Ejemplo de grupo de acordeones
Puedes incluir otros componentes dentro de los acordeones.
```java HelloWorld.java
class HelloWorld {
public static void main(String[] args) {
System.out.println("¡Hola, mundo!");
}
}
```
Añade iconos para que los acordeones sean más diferenciables y fáciles de escanear visualmente.
Mantén el contenido relacionado organizado en grupos.
````
## Propiedades
Título en la vista previa del acordeón.
Detalle debajo del título en la vista previa del acordeón.
Si el acordeón se abre de forma predeterminada.
El ícono que se mostrará.
Opciones:
* nombre del [ícono de Font Awesome](https://fontawesome.com/icons)
* nombre del [ícono de Lucide](https://lucide.dev/icons)
* Código SVG compatible con JSX envuelto entre llaves
* URL a un ícono alojado externamente
* Ruta a un archivo de ícono en tu proyecto
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 del í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`.