> ## Documentation Index > Fetch the complete documentation index at: https://docs.tangerinelearning.com/llms.txt > Use this file to discover all available pages before exploring further. # Bloques interactivos > Acordeón, pestañas, intercambiador de imagen, antes y después, imagen volteable y botón ## Descripción Los bloques interactivos invitan al alumno a explorar el contenido: desplegar, cambiar de pestaña, girar una tarjeta o comparar dos imágenes. Sirven para dosificar la información, proponer pequeños retos o presentar contenido de consulta sin alargar la página. Los bloques de esta página se agrupan en la categoría **Interactivos** de la Biblioteca de bloques. El gráfico etiquetado, el proceso y la línea de tiempo, de la misma categoría, se describen en [Gráfico, proceso y línea de tiempo](https://docs.tangerinelearning.com/herramientas-autor/mint/bloques/interactivos-guiados.md). *** ## Acordeón Lista de apartados que el alumno despliega pulsando **+**. Puede haber varios abiertos a la vez. Es ideal para preguntas frecuentes, glosarios o contenido de ampliación. > [tab] Cerrado > > ![Acordeón con tres preguntas plegadas](https://mintcdn.com/oneclick-54482bfb/3eCy3NVCXcP-wq1t/assets/screenshots/herramientas-autor/mint/bloques/acordeon.png?fit=max\&auto=format\&n=3eCy3NVCXcP-wq1t\&q=85\&s=3de93bec1fc16b3c694d2e73f51ff037) > [tab] Desplegado > > ![Acordeón con el primer apartado desplegado mostrando una imagen y su texto](https://mintcdn.com/oneclick-54482bfb/3eCy3NVCXcP-wq1t/assets/screenshots/herramientas-autor/mint/bloques/acordeon-abierto.png?fit=max\&auto=format\&n=3eCy3NVCXcP-wq1t\&q=85\&s=866bc51cd70ff5c9055499b5bcd7ee90) Cada apartado tiene **título**, **descripción** y, opcionalmente, un **medio** (imagen, vídeo, audio o embebido) con su texto alternativo, pie, alineación y tamaño. ![Panel del acordeón con el primer apartado desplegado: título, descripción, medio, texto alternativo, pie y alineación de imagen](https://mintcdn.com/oneclick-54482bfb/3eCy3NVCXcP-wq1t/assets/screenshots/herramientas-autor/mint/bloques/panel-acordeon.png?fit=max\&auto=format\&n=3eCy3NVCXcP-wq1t\&q=85\&s=950e061da1ddd4d11fc723b80f25f915) Los apartados se añaden, reordenan (arrastrando o con flechas) y borran desde el panel. No hay límite de apartados. *** ## Pestañas El mismo contenido que un acordeón, organizado en **pestañas** horizontales. Si hay más de tres pestañas, aparecen flechas para desplazarse entre ellas. La primera pestaña se muestra abierta. ![Bloque de pestañas Cardinales, Ordinales e Identificadores con la primera seleccionada y su imagen](https://mintcdn.com/oneclick-54482bfb/3eCy3NVCXcP-wq1t/assets/screenshots/herramientas-autor/mint/bloques/pestanas.png?fit=max\&auto=format\&n=3eCy3NVCXcP-wq1t\&q=85\&s=6d26a923aea45157cedea947c6ce09bf) **Acordeón** y **Pestañas** son intercambiables con **Sustituir por bloque compatible**. > [!NOTE] > > Según la configuración del entorno, cada apartado de un acordeón o una pestaña puede incluir **contenido adicional**: bloques de texto y medio extra dentro del mismo apartado. *** ## Intercambiador de imagen Varias imágenes que ocupan el mismo espacio: al pulsar la imagen, pasa a la siguiente (en bucle). Unos puntos bajo la imagen permiten saltar a una concreta. Útil para mostrar estados, variantes o fases de un mismo objeto. ![Intercambiador de imagen con una fotografía, su pie y los puntos de navegación](https://mintcdn.com/oneclick-54482bfb/3eCy3NVCXcP-wq1t/assets/screenshots/herramientas-autor/mint/bloques/intercambiador.png?fit=max\&auto=format\&n=3eCy3NVCXcP-wq1t\&q=85\&s=261b75e896f2b039a0dceb1485aa2c81) * Mínimo **2** y máximo **9** imágenes. Al llegar al máximo, el botón de añadir indica *Máximo de imágenes alcanzado*. * Cada imagen lleva texto alternativo y pie. *** ## Antes y después Dos imágenes superpuestas con un **deslizador** que el alumno arrastra para descubrir una u otra. Para comparar dos estados: antes y después de un proceso, dos épocas, un problema y su solución. ![Bloque Antes y después con dos fotografías divididas por el deslizador y los pies Antes y Después](https://mintcdn.com/oneclick-54482bfb/3eCy3NVCXcP-wq1t/assets/screenshots/herramientas-autor/mint/bloques/antes-despues.png?fit=max\&auto=format\&n=3eCy3NVCXcP-wq1t\&q=85\&s=f8e6ec59531c9684d5a77fa772a23b0b) * Siempre tiene exactamente **dos imágenes**: *Imagen Antes* e *Imagen Después*, cada una con texto alternativo y pie. * Reordenarlas en el panel intercambia cuál es la de antes y cuál la de después. * El deslizador empieza en el centro y también se mueve con las flechas del teclado. *** ## Imagen volteable Tarjeta con **vista frontal** y **vista posterior**. El alumno la gira con un botón. Es el formato de las *flashcards*: pregunta y respuesta, término y definición, problema y solución. > [tab] Vista frontal > > ![Tarjeta volteable mostrando la vista frontal con la pregunta ¿Cuántas cifras tiene el número 1000?](https://mintcdn.com/oneclick-54482bfb/3eCy3NVCXcP-wq1t/assets/screenshots/herramientas-autor/mint/bloques/imagen-volteable.png?fit=max\&auto=format\&n=3eCy3NVCXcP-wq1t\&q=85\&s=d043d60d0d5b792e8e03c10e31615c47) > [tab] Vista posterior > > ![Tarjeta volteable girada mostrando la respuesta Cuatro cifras](https://mintcdn.com/oneclick-54482bfb/3eCy3NVCXcP-wq1t/assets/screenshots/herramientas-autor/mint/bloques/imagen-volteable-reverso.png?fit=max\&auto=format\&n=3eCy3NVCXcP-wq1t\&q=85\&s=69321343b468fa4a75a721f94d0ef337) Cada cara se configura de forma independiente: ![Panel de la imagen volteable con la Vista frontal: tipo de contenido Texto, Imagen, Vídeo o Audio, imagen, texto alternativo, pie y cabecera](https://mintcdn.com/oneclick-54482bfb/3eCy3NVCXcP-wq1t/assets/screenshots/herramientas-autor/mint/bloques/panel-volteable.png?fit=max\&auto=format\&n=3eCy3NVCXcP-wq1t\&q=85\&s=c82b458797e4b80abb324d2052607fa4) | Elemento | Descripción | | - | - | | **Contenido multimedia** | Tipo de cara: **Texto**, **Imagen**, **Vídeo** o **Audio** | | **Cabecera** y **Cuerpo de texto** | Título y texto de la cara (en las caras con medio) | | **Texto alternativo** y **pie** | Según el tipo de medio | Los elementos de cada cara se reordenan arrastrando. *** ## Botón Botón destacado que lleva a una **página web** (en una pestaña nueva) o abre el **correo** con una dirección predefinida. Incluye un texto descriptivo opcional. ![Bloque Botón con el texto Practica con más ejercicios y su descripción](https://mintcdn.com/oneclick-54482bfb/3eCy3NVCXcP-wq1t/assets/screenshots/herramientas-autor/mint/bloques/boton.png?fit=max\&auto=format\&n=3eCy3NVCXcP-wq1t\&q=85\&s=106c58ff5d657794a888f73c894c2054) | Campo | Descripción | | - | - | | Texto del botón | Lo que se lee en el botón | | Destino | Enlace a una página web o envío de un correo | | Dirección | La URL o el correo de destino | | **Descripción** | Texto que acompaña al botón | > [!NOTE] > > Los campos del panel del botón aparecen actualmente en inglés (*Label*, *Destination*, *Link to a webpage*, *Send an email*). La opción de destino *Exit the course* no tiene efecto en el visor: solo deben usarse los destinos web y correo. *** ## Disponibilidad **Intercambiador de imagen**, **Antes y después** e **Imagen volteable** solo pueden crearse en las **páginas html** del backoffice. No aparecen en las lecciones Mint ni en el editor del docente, aunque el docente sí ve y usa los que la editorial haya incluido. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.