Etiqueta <details>

La etiqueta <details> se utiliza para definir un bloque de contenido que puede ser mostrado u ocultado. Este contenido estará oculto de forma predeterminada y será accesible cuando el usuario haga clic en el encabezado proporcionado por la etiqueta <summary>. Es muy útil para mostrar información adicional o detalles que no necesitan estar visibles todo el tiempo, pero que pueden ser relevantes para el usuario.

Ejemplo básico de la etiqueta <details>

      
<details>
    <summary>
        Haz clic para ver más
    </summary>
    <p>
        Este contenido oculto que solo aparecerá cuando
        el usuario haga clic en la flecha
    </p>
</details>

En este ejemplo básico, el contenido dentro de la etiqueta <details> está oculto inicialmente y solo será visible cuando el usuario haga clic en la etiqueta <summary>.

¿Cómo funciona la etiqueta <summary>?

La etiqueta <summary> actúa como el encabezado que se muestra siempre visible. Cuando el usuario hace clic en el texto del resumen, el contenido dentro de la etiqueta <details> se despliega o se oculta. Puedes usar cualquier tipo de contenido dentro del resumen, como texto, imágenes o iconos.

Ejemplo con contenido adicional

      
<details>
    <summary>
        Información de contacto
    </summary>
    <p>
        Correo electrónico: contacto@miempresa.com
    </p>
    <p>
        Teléfono: 123-456-789
    </p>
</details>

Este ejemplo muestra cómo puedes usar la etiqueta <details> para proporcionar información adicional, como los datos de contacto de una empresa. El contenido solo será visible cuando el usuario haga clic en el encabezado de la etiqueta <summary>.

Más ejemplos de uso de <details>

Aquí tienes algunos ejemplos más de cómo podrías usar la etiqueta <details> en diferentes contextos:

  • Instrucciones paso a paso: Puedes esconder instrucciones detalladas que el usuario solo abrirá si necesita ayuda.
  • Preguntas frecuentes (FAQ): Puedes usarla para ocultar las respuestas a preguntas frecuentes, haciendo que la página sea más limpia y organizada.
  • class="item_list_info"Información adicional en productos: Al mostrar información adicional sobre un producto, como especificaciones, los usuarios pueden acceder a ella cuando lo deseen.

Ejemplo de FAQ (Preguntas Frecuentes)

      
<details>
    <summary>
        ¿Cómo puedo hacer una compra?
    </summary>
    <p>
        Para hacer una compra, debes seleccionar el producto y agregarlo al carrito
    </p>
    </details>
     <details>
    <summary>
        ¿Cuáles son los métodos de pago disponibles?
    </summary>
    <p>
        Aceptamos tarjetas de crédito, PayPal y transferencias bancarias.
    </p>
</details>

Este es un ejemplo común donde la etiqueta <details> se usa para crear un acordeón de preguntas frecuentes (FAQ). Los usuarios pueden hacer clic en cada pregunta para expandir la respuesta sin saturar la página con demasiada información.

Ventajas de usar la etiqueta <details>

  • Interactividad mejorada: Permite una mejor experiencia de usuario, al mantener la página limpia y organizada sin ocultar información importante.
  • Accesibilidad: La etiqueta es compatible con tecnologías asistivas, lo que permite que los usuarios con discapacidades también puedan interactuar con los detalles de manera sencilla.
  • Reducción de la carga visual: Ocultar contenido que no es necesario mostrar de inmediato puede hacer que la página se vea más limpia y enfocada en lo más relevante.

Consideraciones adicionales

Aunque la etiqueta <details> es una herramienta útil para crear contenido interactivo, es importante tener en cuenta lo siguiente:

  • Compatibilidad del navegador: Aunque la mayoría de los navegadores modernos soportan la etiqueta <details>, algunos navegadores más antiguos pueden no soportarla correctamente. Asegúrate de probar tu página en diferentes navegadores.
  • Accesibilidad: La etiqueta <details> es muy accesible, pero asegúrate de proporcionar descripciones claras en el <summary> para que los usuarios con discapacidades visuales puedan comprender el propósito del contenido oculto.
  • Estilo personalizado: Si necesitas personalizar la apariencia de la etiqueta <details>, puedes hacerlo mediante CSS para cambiar el diseño del <summary> o el comportamiento de expansión.
Anterior Siguiente