Etiqueta summary y details

Etiqueta summary y details

Actualmente estoy diseñando una web para una psicóloga que maneja la terapia integrativa, es decir el empleo de diferentes técnicas modelos y psicoterapias avaladas científicamente como efectivas y es una enciclopedia de psicóloga, saber mucho y quiere trasnmitirlo por medio de su web. Y bueno eso es lo que debe hacer una web transmitir lo que es un profesional, una agencia de turismo o un hotel, ser una vitrina de exhibición de la personalidad de la marca.

Pero bueno como tiene tanto por decir en una de las secciones de la web quiero acortar el texto y que si el usuario quiere saber más haga click y se despliegue más información, según entiendo para lograrlo tradicionalmente se utilizaban unas cuantas líneas de javascript pero ahora he encontrado estas etiquetas que facilitan el proceso son

Nueva etiqueta html5

<details>
<summary>Sumario explicativo</summary>
<p>Datos y texto, Datos y texto, Datos y texto, Datos y texto</p>
</details>

El elemento <details> funciona como un acordeón, donde el contenido permanece inicialmente escondido.

El <summary> se convertiría en un título y el párrafo el texto que se mostrará tras hacer click en el triángulo.

Probando eiqueta Details y Summary

1.MODELOS PSICODINAMICOS:

Entiende la psicoterapia como una relación intima entre el terapeuta y el paciente, quien comparte con el primero sus conflictos, problemas y sus ansiedades. Donde, gracias a la exploración profunda se puede encontrar la raíz de estos problemas y con ello se favorece el cambio: “Para que un cambio sea posible, se ha de hacer consciente la razón oculta detrás de la conducta, el pensamiento o la emoción que perpetúa el problema”. De esta manera, el comportamiento de la persona deja de estar enteramente determinado como por “fuerzas oscuras”.

Ver más

De esta manera, el comportamiento de la persona deja de estar enteramente determinado como por “fuerzas oscuras”. El psicoterapeuta guía el proceso de investigar desde y para el paciente lo que está dentro de sí, ayudándole a identificar y comprender lo que se está pasando en el aquí y en el ahora de su presente y en su mundo interno, tratando de relacionar esto con su historia de crianza y desarrollo. Lo que llevaría al paciente a terapia serian sus dificultades insuperables, cuando sus problemas o síntomas entran en conflicto con aspectos que no tolera de si o de los otros con los que se relaciona.


Voila y con un poco de CSS se puede lograr que el asunto se vea bonito. Tanto a la etiqueta summary como al contenido se le pueden dar clases y así darle la apariencia de botón que sería lo más adecuado.

Compartir:

Leave a Reply

Your email address will not be published.