Bonjour à tous !
Je rencontre un petit problème avec mon blog (j'utilise blogger)
La fonction afficher/cacher fonctionne bien quand on clique dessus mais le problème vient du fait que même quand le texte est sensé être caché, il occupe tout de même de l'espace sur la page.
Il y a donc un grand espace blanc entre la phrase sur laquelle on clique "afficher le texte" et la suite de l'article
Voici des captures d'écran :
Ce que l'on voit au départ :
_______________________________________________
Quand on clique sur "afficher le texte" :
_______________________________________________
Voici ce que j'ai mis dans la balise head de mon template :
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 <script type='text/javascript'> //<![CDATA[ // function afficher_cacher(id) { if(document.getElementById(id).style.visibility=="hidden") { document.getElementById(id).style.visibility="visible"; document.getElementById('bouton_'+id).innerHTML='Cacher le texte'; } else { document.getElementById(id).style.visibility="hidden"; document.getElementById('bouton_'+id).innerHTML='Afficher le texte'; } return true; } //]]> </script>
Voici le CSS que j'ai mis dans le template également :
Voici le code que j'insère dans mon article :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 .bouton { color:#0000ff; font-size:24px; cursor:pointer; } .bouton:hover { text-decoration:underline; } .texte { border:1px solid #333333; background:#eeeeee; padding:10px; color:#333333; } .texte:hover { border:1px solid #000000; background:#cccccc; color:#000000; }
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14 <span class="bouton" id="bouton_texte" onclick="javascript:afficher_cacher('texte');">Afficher le texte</span> <div id="texte" class="texte"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus fermentum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras interdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br /> </div> <script type="text/javascript"> //<!-- afficher_cacher('texte'); //--> </script> Bonjour, Dans cet article je vais partager avec vous des idées pour les séjours à l'étranger !
Merci d'avance pour votre aide,
Bonne journée !
Partager