Fonction afficher/cacher

2 pièce(s) jointe(s)

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 :
Pièce jointe 159691
_______________________________________________

Quand on clique sur "afficher le texte" :

Pièce jointe 159692
_______________________________________________

Voici ce que j'ai mis dans la balise head de mon template :

Code:

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 :

Code:

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;
}

Voici le code que j'insère dans mon article :

Code:

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 !

Au lieu d'utiliser la propriété css visibility, utilise plutôt la propriété display en la faisant passer de none à block et vice versa.

Bonjour,

Merci pour la réponse rapide, je viens de faire la modification dans mon code et tout est parfait maintenant ! :hola:

Bonne fin de journée !