Discussion :

[mcvovol]

Bonjour/bonsoir.

J'ai recement mis en place visibility sur mes pages web mais il se pose un probleme...

En effet, quand je cache le texte, il laisse la place vide visible. C'est a dire, si le texte est caché, il laissera autant de ligne "blanche" que de contenu ecris...

Voici mon code source :

javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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;
}

portion de code html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
		<span  id="text">
		<p>1.1 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.1">L'eau a l'état naturel (<i>al-mâ' al-mutlaq</i>)</a></p>
		<p>1.2 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.2">L'eau déjà utilisée (<i>al-mâ' al-musta'mal</i>)</a></p>
		<p>1.3 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.3">L'eau mélangée à un corp pur</a></p>
		<p>1.4 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.4">L'eau en contact avec une impureté</a></p>
		<p>1.5 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.5">L'eau altérée par la salive (<i>as-su'r</i>)</a></p>
		</span>

c'est curieux non ?

Si vous voulez voir le resultat c'est par ici que ca se passe

[NoSmoking]

Bonjour,
il te faut utiliser la propriété display plutôt que visibility, voir http://torgar.developpez.com/glossai...tionnement.php

pour ton code HTML l'utilisation des listes OL LI serait quand même plus adéquate.

[mcvovol]

Bonjour,

Tout d'abord, merci de votre réponse.

J'ai fais quelques changement sur ma portion de code et voici ce que cela donne.

css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#text
{
   display:none;
}

html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
		<p><h5><a onclick="javascript:afficher_cacher('text');">1 : Les eaux et leurs catégorie</a></h5></p>
		<li  id="text">
		<ul>1.1 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.1">L'eau a l'état naturel (<i>al-mâ' al-mutlaq</i>)</a></ul>
		<ul>1.2 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.2">L'eau déjà utilisée (<i>al-mâ' al-musta'mal</i>)</a></ul>
		<ul>1.3 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.3">L'eau mélangée à un corp pur</a></ul>
		<ul>1.4 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.4">L'eau en contact avec une impureté</a></ul>
		<ul>1.5 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.5">L'eau altérée par la salive (<i>as-su'r</i>)</a></ul>
		</li>

javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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;
}

Ca cache bien le texte en supprimant l'espace comme convenu.

Cependant, il n'est plus possible d'afficher le texte au clic :'(

[Bovino]

Essaye au moins de comprendre ce que tu fais...

Si ton élément est en display none, ce n'est pas sur le style visibility qu'il faut jouer pour l'afficher !

[mcvovol]

Je pense avoir compris ^^ (une lumière aveuglante a jailli dans mon cerveau...)

il suffit que je change style.visibility en style.display c'est bien ca ?

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
function afficher_cacher(id)
{
        if(document.getElementById(id).style.display=="none")
        {
                document.getElementById(id).style.display="visible";
                document.getElementById('bouton_'+id).innerHTML='Cacher le texte';
        }
        else
        {
                document.getElementById(id).style.display="hidden";
                document.getElementById('bouton_'+id).innerHTML='Afficher le texte';
        }
        return true;
}

Manifestement je dois etre encore plus mauvais que je le pensai...

[NoSmoking]

il suffit que je change style.visibility en style.display c'est bien ca ?

en lui appliquant les bonnes valeurs http://torgar.developpez.com/glossai...t.php#adisplay