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”.

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.