--- url: 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/layout/collapsibles-element' title: 'Añade un panel plegable | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T00:56:02+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Usa un panel plegable, también llamado acordeón, cuando quieras una lista de encabezados que las personas visitantes abran de uno en uno. Sirve para preguntas frecuentes, listas de funciones y contenido largo que se lee mejor por partes. Terminas con una pila de preguntas cuyas respuestas se abren con un clic. El ejemplo crea tres preguntas para la página de preguntas frecuentes de una agencia.' tags: - Lay-out image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Añade un panel plegable' description: 'Usa un panel plegable, también llamado acordeón, cuando quieras una lista de encabezados que las personas visitantes abran de uno en uno. Sirve para preguntas frecuentes, listas de funciones y contenido largo que se lee mejor por partes. Terminas con una pila de preguntas cuyas respuestas se abren con un clic. El ejemplo crea tres preguntas para la página de preguntas frecuentes de una agencia.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T00:56:02+0000' dateModified: '2026-10-24T09:09:48+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/layout/collapsibles-element' articleSection: Lay-out - '@type': WebPage '@id': 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/layout/collapsibles-element' description: 'Usa un panel plegable, también llamado acordeón, cuando quieras una lista de encabezados que las personas visitantes abran de uno en uno. Sirve para preguntas frecuentes, listas de funciones y contenido largo que se lee mejor por partes. Terminas con una pila de preguntas cuyas respuestas se abren con un clic. El ejemplo crea tres preguntas para la página de preguntas frecuentes de una agencia.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Inicio item: 'https://dxpr.com/es' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: es --- [Help Center](/es/hc)/[Documentation](/es/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Lay-out](/hc/documentation/learn-dxpr-builder/layout/overview) # Añade un panel plegable. Learn DXPR BuilderBuild pagesAdd contentLay-out ## In this guide Related guides - [Añade un panel de pestañas](/es/hc/documentation/learn-dxpr-builder/layout/tabs-element) - [Crea una página de preguntas frecuentes](/es/hc/documentation/learn-dxpr-builder/tutorials/faq-page) - [Añade un diseño anidado](/es/hc/documentation/learn-dxpr-builder/layout/nesting) Usa un panel plegable, también llamado acordeón, cuando quieras una lista de encabezados que las personas visitantes abran de uno en uno. Sirve para preguntas frecuentes, listas de funciones y contenido largo que se lee mejor por partes. Terminas con una pila de preguntas cuyas respuestas se abren con un clic. El ejemplo crea tres preguntas para la página de preguntas frecuentes de una agencia. ## Añade un panel plegable 1. Haz clic en **+** en una sección y elige **Panel plegable** en la pestaña **Diseño**. Llega con un interruptor. 2. Abre los ajustes del panel desde su menú **Más**. Elige con **Plegar** si cada interruptor empieza cerrado. Aquí está activado. Elige un **icono de expandir** y haz clic en **Guardar**. 3. Pasa el cursor sobre el interruptor, abre su menú **Más** y elige **Ajustes**. Escribe la pregunta como **Título del interruptor** y haz clic en **Guardar**. 4. Haz clic en la pregunta para abrir el interruptor. Haz clic en **+** dentro, elige **Texto** y escribe la respuesta. 5. Haz clic en **Añadir interruptor** en la barra de control del panel para la siguiente pregunta. Los interruptores nuevos caen arriba, así que añade primero la última pregunta. 6. Haz clic en **Guardar** en la barra de herramientas. En Vista previa, haz clic en una pregunta para comprobar que su respuesta se abre. ## Lo que ves Cada pregunta es un encabezado con el icono de expandir elegido. Un clic abre su respuesta debajo, y la respuesta que estaba abierta se cierra. Con **Plegar** desactivado, la primera respuesta está abierta al cargar la página. Las respuestas siguen en el HTML de la página mientras están cerradas, así que los buscadores aún pueden leerlas. ## Configura tu panel plegable El elemento **Panel plegable** tiene dos ajustes, en **Más** > **Ajustes** en su barra de control. | Ajuste | Efecto | Valor por defecto | |---|---|---| | **Plegar** | Activado: cada interruptor empieza cerrado. Desactivado: el primer interruptor empieza abierto | Desactivado | | **Icono de expandir** | El icono junto a cada título: **Ninguno**, **+** (más y menos) o **﹀** (una flecha) | Ninguno | Cada interruptor tiene un ajuste, **Título del interruptor**: la pregunta o el encabezado en el que hacen clic las personas visitantes. ## Gestiona los interruptores - **Reordenar**: arrastra un interruptor por **Interruptor** en su barra de control y suéltalo encima o debajo de otro. - **Renombrar**: pasa el cursor sobre el interruptor, abre **Más** > **Ajustes**, cambia el **Título del interruptor** y haz clic en **Guardar**. - **Quitar**: pasa el cursor sobre el interruptor, abre **Más** y elige **Eliminar**. La respuesta de dentro se va con él. Un interruptor guarda cualquier elemento: texto, imágenes, botones o una fila con columnas. Mantén corta cada respuesta. Si una respuesta necesita una página propia, enlaza a esa página en su lugar. ## Si no lo ves - **La pregunta nueva aparece arriba.** **Añadir interruptor** siempre inserta arriba del panel. Arrastra el interruptor por **Interruptor** en su barra de control hasta el sitio que quieras. - **Los ajustes solo muestran Título del interruptor.** Abriste los ajustes de un interruptor. Pasa el cursor sobre el borde superior del panel para que se muestre la barra de control de **Panel plegable**, y abre allí **Más** > **Ajustes**. - **La primera respuesta está abierta al cargar la página.** **Plegar** está desactivado. Actívalo en los ajustes de **Panel plegable** para que cada respuesta empiece cerrada. - **Panel plegable no está en la pestaña Diseño del selector.** Tu perfil de usuario de DXPR Builder lo excluye. Una persona administradora marca **Acordeón** en **Elementos** de tu perfil, en `/admin/dxpr_studio/dxpr_builder/profile`. ## ¿Qué sigue? - [Añadir un panel de pestañas](/es/hc/documentation/learn-dxpr-builder/layout/tabs-element): muestra contenido relacionado lado a lado en lugar de apilado. - [Tutorial de página de preguntas frecuentes](/es/hc/documentation/learn-dxpr-builder/tutorials/faq-page): crea una página entera de preguntas frecuentes alrededor de un panel plegable. - [Anidamiento](/es/hc/documentation/learn-dxpr-builder/layout/nesting): pon filas y columnas dentro de un interruptor.