La etiqueta <details> de HTML5 nos permite definir un conjunto de información que se estará oculta para el usuario, por defecto, pero que podrá ser mostrada si el usuario hace clic.
Por lo general la veremos trabajando con <summary>, que actuará como el texto visible. Veamos un ejemplo a continuación para entender mejor su funcionamiento:
<details> <summary>Licencia de uso</summary> <p>Este material pertenece a css3html5.com.ar bajo licencia Creative Commons</p> <p>Para utilizar este material, consultar a sus respectivos autores.</p> </details>
¿Simple, verdad? Ahora veamos el ejemplo en acción (importante: solo lo veremos funcionando en los navegadores compatibles):
Licencia de uso
Este material pertenece a css3html5.com.ar bajo licencia Creative Commons
Para utilizar este material, consultar a sus respectivos autores.
Más sobre Diseño y desarrollo Web
Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.
Hola muy interesante y ahora como se le da estilo a la etiqueta Details ?
Mediante CSS. Aquí hay un muy buen ejemplo de como hacerlo: http://html5doctor.com/the-details-and-summary-elements/
Buenas recientemente e iniciado una petición en change.org para que añadan estas etiquetas en todos los navegadores web para que hagamos un poco de fuerza y las integren, si alguien desea echar una mano que la firme.Saludos y gracias de antemano
https://www.change.org/p/mozilla-microsoft-apple-opera-integrar-los-elementos-details-y-summary-de-html5-en-todos-los-navegadores