Mostrar / ocultar o contraer/expandir una área de texto
Resuelto
langueyef
Mensajes publicados
3
Estado
Miembro
-
Magwa -
Magwa -
Hola a todos,
Acabo de construir mi sitio web a través de 1&1 (website builder) y, siendo completamente novato en html (yo trabajo en RRHH, no en IT :-), estoy atascado/a en la comprensión de los distintos foros que he leído sobre cómo mostrar u ocultar una zona de texto haciendo clic en un botón o en un encabezado. He visto divs, visibility, toggles, etc... pero bueno...
CONCRETO
En visual, en mi sitio, esto es lo que tengo:
#Construcción de una política de RRHH
Identificar las problemáticas de RRHH de la estructura y acompañar al/la director/a para apropiárselas
Co-construir ejes estratégicos que permitan disponer de los recursos necesarios para la realización del proyecto de la estructura
Armonizar las prácticas de RRHH dentro de una red / de centros
Asegurar la representación de la estructura interna y externamente sobre la política de RRHH
Establecer una comunicación de RRHH
En código html, esto es lo que da:
C'est afficher uniquement l'en-tête (#Construction d'une politique RRHH) et lorsque l'on clique dessus que le reste du texte s'affiche (en conservant police, couleurs, gras pas gras, etc...).
Quelqu'un pourrait-il modifier le code html ci-dessus pour que cela donne ce que je souhaite ? Ensuite je pourrais le reproduire sur tous les autres morceaux de mon site.
Ce serait très gentil et ça m'aiderait beaucoup car c'est pour le lancement de mon activité pro et je n'ai pas les moyens de faire appel à un pro...
Un grand merci d'avance pour vos réponses.
Acabo de construir mi sitio web a través de 1&1 (website builder) y, siendo completamente novato en html (yo trabajo en RRHH, no en IT :-), estoy atascado/a en la comprensión de los distintos foros que he leído sobre cómo mostrar u ocultar una zona de texto haciendo clic en un botón o en un encabezado. He visto divs, visibility, toggles, etc... pero bueno...
CONCRETO
En visual, en mi sitio, esto es lo que tengo:
#Construcción de una política de RRHH
Identificar las problemáticas de RRHH de la estructura y acompañar al/la director/a para apropiárselas
Co-construir ejes estratégicos que permitan disponer de los recursos necesarios para la realización del proyecto de la estructura
Armonizar las prácticas de RRHH dentro de una red / de centros
Asegurar la representación de la estructura interna y externamente sobre la política de RRHH
Establecer una comunicación de RRHH
En código html, esto es lo que da:
<p style="text-align: justify;"><br /> <span style="color:#0688D1;"><span style="font-size:14px;"><strong>#Construction d'une politique RH</strong></span></span></p> <p style="text-align: justify; margin-left: 40px;"><span style="color:#666666;"><span style="font-size:14px;">Identifier les problématiques RRHH de la structure et accompagner le dirigeant pour se les approprier<br /> Co-constuire des axes stratégiques permettant de disposer des ressources nécessaires à la réalisation du projet de la structure<br /> Harmoniser les pratiques RRHH au sein d'un réseau / d'établissements<br /> Assurer la représentation de la structure en interne et en externe sur la politique RRHH<br /> Mettre en place une communication RRHH</span></span></p>
EDIT : Ajout des balises de code (jordane45)
CE QUE JE VEUXC'est afficher uniquement l'en-tête (#Construction d'une politique RRHH) et lorsque l'on clique dessus que le reste du texte s'affiche (en conservant police, couleurs, gras pas gras, etc...).
Quelqu'un pourrait-il modifier le code html ci-dessus pour que cela donne ce que je souhaite ? Ensuite je pourrais le reproduire sur tous les autres morceaux de mon site.
Ce serait très gentil et ça m'aiderait beaucoup car c'est pour le lancement de mon activité pro et je n'ai pas les moyens de faire appel à un pro...
Un grand merci d'avance pour vos réponses.
1 respuesta
-
Hola,
Para hacer esto te hace falta, además del HTML, del JAVASCRIPT
voilá :<p style="text-align: justify;"><br /> <span style="color:#0688D1;"> <span style="font-size:14px;" onclick="ShowHide('zoneAafficher1')";><strong>#Construcción de una política de RRHH</strong></span> </span> </p> <p id='zoneAafficher1' style="text-align: justify; margin-left: 40px; display:none"> <span style="color:#666666;"> <span style="font-size:14px;">Identificar las problemáticas de RRHH de la estructura y acompañar al líder para apropiárselas<br /> Co-construir ejes estratégicos que permitan disponer de los recursos necesarios para la realización del proyecto de la estructura<br /> Armonizar las prácticas de RRHH dentro de una red / de establecimientos<br /> Garantizar la representación de la estructura interna y externamente sobre la política de RRHH<br /> Establecer una comunicación de RRHH</span> </span> </p> <p style="text-align: justify;"><br /> <span style="color:#0688D1;"> <span style="font-size:14px;" onclick="ShowHide('zoneAafficher2')";><strong>#¿Qué es el Lorem Ipsum?</strong></span> </span> </p> <p id='zoneAafficher2' style="text-align: justify; margin-left: 40px;display:none"> <span style="color:#666666;"> <span style="font-size:14px;"> El Lorem Ipsum es simplemente un texto falso utilizado en la composición y la maquetación antes de la impresión.<br> El Lorem Ipsum es el texto falso estándar de la imprenta desde los años 1500, cuando un grabador anónimo ensambló<br> trozos de texto para realizar un libro de pruebas de tipografías. <br> No solo sobrevivió cinco siglos, sino que también se adaptó a la informática de oficina, <br> sin que su contenido fuera modificado. Se popularizó en los años 1960 gracias a la venta de hojas <br> Letraset que contenían pasajes de Lorem Ipsum, y, más recientemente, por su inclusión en aplicaciones de maquetación de texto, como Aldus PageMaker. </span> </span> </p> <script type="text/javascript"> function ShowHide(elm){ var element = document.getElementById(elm); if( element.style.display == 'none'){ element.style.display = 'block'; }else{ element.style.display = 'none'; } } </script>
--
Cordialement,
Jordane-
-
Css -> cursor -> elige el que quieras;
https://www.w3schools.com/cssref/pr_class_cursor.asp
-
