Menu

Afficher / masquer ou plier/déplier une zone de texte [Résolu/Fermé]

Messages postés
3
Date d'inscription
mercredi 3 mai 2017
Dernière intervention
8 mai 2017
-
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.
Afficher la suite 

1 réponse

Meilleure réponse
Messages postés
23600
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2018
1
Merci
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>

Merci jordane45 1

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CommentCaMarche

CCM a aidé 33541 internautes ce mois-ci

faaaaab
Messages postés
3
Date d'inscription
lundi 3 décembre 2018
Dernière intervention
5 décembre 2018
-
Bonjour Jordane,

Merci beaucoup pour ta réponse. Chez moi, ça marche presque. Avec ton code, lorsque je charge la page internet, le texte est déjà affiché et lorsque j'appuie sur le bouton "Lire plus", le texte en-dessous disparaît. Mais j'aimerais que ce soit l'inverse : que quand je charge la page internet, le texte devrait être invisible et lorsque j'appuie sur "lire plus" il faudrait que le texte apparaisse. Tu peux me dire ce qu'il faut changer dans le code pour arriver à ce résultat?

Merci beaucoup!!!
jordane45
Messages postés
23600
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2018
> faaaaab
Messages postés
3
Date d'inscription
lundi 3 décembre 2018
Dernière intervention
5 décembre 2018
-
Si tu ne nous montres pas quel code tu utilises actuellement..... IMPOSSIBLE de te répondre !
faaaaab
Messages postés
3
Date d'inscription
lundi 3 décembre 2018
Dernière intervention
5 décembre 2018
> jordane45
Messages postés
23600
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2018
-
Je ne sais pas si ça va t'aider pcq je n'ai pas le code complet vu que j'essaye d'intégrer ça dans un logiciel de mails "Flexmail". Mais du coup, pour la partie concernée, voici le code que j'ai utilisé :
<p><b> <span onclick="HideShow('zoneAafficher1')">#Lire plus</span><br /></b></p>

<p id="zoneAafficher1">Les séminaires et formations sont le rendez-vous idéal pour vous informer de l’actualité réglementaire et des possibilités techniques applicables à vos projets.</p>

<script type="text/javascript">// <![CDATA[
function HideShow(elm){
   var element = document.getElementById(elm);
   if( element.style.display == 'none'){
     element.style.display = 'block';
   }else{
     element.style.display = 'none';
   }
 }
// ]]></script>


EDIT : Ajout des balises de code

Sais-tu me dire ce qui ne va pas?

Merci
jordane45
Messages postés
23600
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2018
> faaaaab
Messages postés
3
Date d'inscription
lundi 3 décembre 2018
Dernière intervention
5 décembre 2018
-
Ou est passé le code initialie que tu nous avais montré ?
En l’occurrence.. le display:none ???
<p id='zoneAafficher1' style="text-align: justify; margin-left: 40px; display:none">
faaaaab
Messages postés
3
Date d'inscription
lundi 3 décembre 2018
Dernière intervention
5 décembre 2018
> jordane45
Messages postés
23600
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2018
-
Salut Jordane,

ça marche! 1000 mercis! :) Belle journée à toi,