Afficher et masquer du contenu

Version imprimable

Bonjour,

Je m'excuse d'avance car on me dira que je peux trouver ma reponse dans les forums. Je veux afficher et masquer du contenu à volonté. Mes recherches m'ont permis de trouver du code qui ne marche pas dans mon cas.

Partie CSS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
.clicCacher
  {
  top: -20px;
  position: relative;
  text-align:right;
  }
 
.contenant 
  {
  display : none;
  /*border: 1px solid #000000;*/
  }

Partie JS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
function afficheId(baliseId) {
 
          if (document.getElementById && document.getElementById(baliseId) != null) {
 
               document.getElementById(baliseId).style.visibility='visible';
               document.getElementById(baliseId).style.display='block';
 
          }
 
      }
 
 
      function cacheId(baliseId) {
 
          if (document.getElementById && document.getElementById(baliseId) !=  null) {
 
                 document.getElementById(baliseId).style.visibility='hidden';
                 document.getElementById(baliseId).style.display='none';
 
          }
 
      }
 
      cacheId('criteresplus');

Ma page html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<div id="base" class="rech_titre">
			<table>
				<tr>
					<td>
						<label for="motscles"><span id="monlabel">Expression ou mots cl&eacute;s de recherche :</span></label><br />
						<input type="text" name="motscles" id="motscles"  size="70" />
					</td>
					<td colspan="2" class="td_recherche">
						<ul>
						<li class="li_recherche"><a href="javascript:afficheId('criteresplus');">Recherche avanc&eacute;e</a></li>
						<li class="li_recherche"><a href="recherche.php">Autres 2</a></li>
						</ul>
				    </td>
				</tr>
			</table>
		</div>
 
		<div id="criteresplus" name="criteresplus" class="contenant">
			fdjhfgqsdjhsdfgjhsdfkjsd
		</div>

A l'affichage, la parti à masquer est effectivement masquée mais
quand je clique sur le lien "Recherche avancée" afin d'afficher la partie masquée, j'ai l'erreur suivante

Code:

1
2
3
4
5
 
Ligne : 1
Caractère : 1
Erreur : objet attendu
Code : 0

Apparemment le getElementById ne marche pas
Quelqu'un peut-il m'aider à resoudre ce problème ? Merci d'avance

27/04/2010, 12h34
E.Bzz

Bonjour,
ton problème est peut être plutôt dû à cet appel

Code:

cacheId('criteresplus');

Effectué dans le <head>, il y a de gros risques que le div n'existe pas encore.

Ceci dit, je ne vois pas l'intérêt : autant définir le CSS display:none pour "criteresplus" lors de la génération de la page, pourquoi le faire en Javascript ? :koi:

De plus, il est inutile de modifier à la fois le display et le visibility : on utilise soit l'un soit l'autre ;)

A+
27/04/2010, 12h41
kitiss

Merci pour votre réaction.

j'ai precisé qu'à l'affichage de la page, la partie à masquer ets effectiement masquée. Cela suppose ( je crois) que le

Code:

cacheId(criteresplus)

marche sans problème.
27/04/2010, 13h33
vermine

Bonjour,

Le code JS avec le code HTML que vous nous avez donné fonctionne correctement sur IE7. Je n'ai pas inclu le CSS et le script est dans la page HTML.
27/04/2010, 13h39
E.Bzz
Citation:

Envoyé par kitiss

Cela suppose ( je crois) que le

Code:

cacheId(criteresplus)

marche sans problème.

Non, justement, car tu le masques également via sa class CSS ;)
Code:

1 2 3 4 5 .contenant { display : none; /*border: 1px solid #000000;*/ }
Je me disais donc que tu croyais peut être générer l'erreur en appelant la fonction afficheId(), alors qu'elle avait lieu avant, lors de l'appel à cacheId() ...

EDIT : essaye d'appeler cacheId() dans le onload du <body>

A+
27/04/2010, 13h54
kitiss

Merci pour vos réactions.
Vous avez parafaitement raison E.Bzz. J'ai pris en compte vos remarques (visibility et display) et j'ai enlevé le code JS et les styles de la page HTML.
Ainsi je ne fais plus l'appel

Code:

cacheId('criteresplus')

au chargement de la page (le DIV etant déjà masqué par via la class css.
J'obtiens par le même coup le resultat que j'attendais.
Merci beaucoup