Afficher et masquer du contenu

**kitiss** · 27/04/2010, 12h24

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 :

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

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 :

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
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 :

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
 
<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 :

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

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

**E.Bzz** · 27/04/2010, 12h34

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

Code :

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

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 ?

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

A+

**kitiss** · 27/04/2010, 12h41

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 :

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

cacheId(criteresplus)

marche sans problème.

**vermine** · 27/04/2010, 13h33

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.

**E.Bzz** · 27/04/2010, 13h39

Envoyé par kitiss

Cela suppose ( je crois) que le

Code :

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

cacheId(criteresplus)

marche sans problème.

Non, justement, car tu le masques également via sa class CSS

Code css :

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

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+

**kitiss** · 27/04/2010, 13h54

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 :

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