Afficher / masquer ou plier/déplier une zone de texte

Résolu/Fermé
langueyef Messages postés 3 Date d'inscription mercredi 3 mai 2017 Statut Membre Dernière intervention 8 mai 2017 - Modifié le 3 mai 2017 à 21:52
 Magwa - 24 janv. 2023 à 08:44
Bonjour à tous,

Je viens de construire mon site web via 1&1 (website builder) et, étant complètement néophyte en html (je suis dans les RH pas dans l'IT:-), je cale complètement sur la compréhension des différents forums que j'ai pu parcourir sur comment afficher ou masquer une zone de texte en cliquant sur un bouton ou sur un en-tête. J'ai bien vu des div, des visibility, des toggles, etc... mais bon ...

CONCRETEMENT

En visuel, sur mon site, voici ce que j’ai :

#Construction d'une politique RH
Identifier les problématiques RH de la structure et accompagner le dirigeant pour se les approprier
Co-constuire des axes stratégiques permettant de disposer des ressources nécessaires à la réalisation du projet de la structure
Harmoniser les pratiques RH au sein d'un réseau / d'établissements
Assurer la représentation de la structure en interne et en externe sur la politique RH
Mettre en place une communication RH


En code html, voici ce que ça donne :
<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 RH 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 RH au sein d'un réseau / d'établissements<br />
Assurer la représentation de la structure en interne et en externe sur la politique RH<br />
Mettre en place une communication RH</span></span></p>

EDIT : Ajout des balises de code (jordane45)

CE QUE JE VEUX

C'est afficher uniquement l'en-tête (#Construction d'une politique RH) 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 me modifier le code html ci-dessus pour que ça donne ce que je souhaite ? En suite 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 par avance pour vos réponses.

1 réponse

jordane45 Messages postés 38143 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 649
3 mai 2017 à 22:00
Bonjour,

Pour faire cela il te faut, en plus du HTML, du JAVASCRIPT

voilou :
 
<p style="text-align: justify;"><br />
 <span style="color:#0688D1;">
  <span style="font-size:14px;" onclick="ShowHide('zoneAafficher1')";><strong>#Construction d'une politique RH</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;">Identifier les problématiques RH 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 RH au sein d'un réseau / d'établissements<br />
     Assurer la représentation de la structure en interne et en externe sur la politique RH<br />
     Mettre en place une communication RH
   </span>
  </span>
</p>


<p style="text-align: justify;"><br />
 <span style="color:#0688D1;">
  <span style="font-size:14px;" onclick="ShowHide('zoneAafficher2')";><strong>#Qu'est-ce que le 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;">
    Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.<br>
    Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla<br>
    ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. <br>
    Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, <br>
    sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles <br>
    Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme 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>

1
langueyef Messages postés 3 Date d'inscription mercredi 3 mai 2017 Statut Membre Dernière intervention 8 mai 2017
8 mai 2017 à 15:14
Merci beaucoup Jordane, c'est top, cela fonctionne !
Y a t-il une astuce particulière pour que, lorsqu'on survole l'intitulé cliquable, le pointeur se transforme en doigt pour montrer qu'on peut effectivement cliquer ?
Merci encore
0
jordane45 Messages postés 38143 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 649 > langueyef Messages postés 3 Date d'inscription mercredi 3 mai 2017 Statut Membre Dernière intervention 8 mai 2017
8 mai 2017 à 15:45
Css -> cursor -> choisi celui que tu veux;
https://www.w3schools.com/cssref/pr_class_cursor.asp
0