Div visible / invisible

Version imprimable

Bonjour,

j'essaye de créer un script me permettant de rendre visible/invisible plusieurs div sur une page. Mais on dirait que les scripts sont en conflit...

En effet, chaque lien est sensé faire apparaitre/disparaitre une div chacun mais ils agissent tout deux sur la même div...

Je suis particulièrement nulle en Javascript donc je ne vois pas du tout d'où ca vient.

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
<!doctype html>
<html>
<head>
<title>mapage</title>
 
<script type="text/javascript">
function aff1 ()
{
        if (addr.id == "aff11") addr.id = "aff12";
        else                    addr.id = "aff11";
}
 
window.onload = function () {
        addr = document.getElementById("aff11");
}
 
 
 
</script>
 
<script type="text/javascript">
function flipflop ()
{
        if (addr.id == "flip")  addr.id = "flop";
        else                    addr.id = "flip";
}
 
window.onload = function () {
        addr = document.getElementById("flip");
}
</script>
 
 
 
 
 
<style type="text/css">
#aff11 {        visibility : visible;   }
#aff12 {        visibility : hidden;    }
 
 
#flip { visibility : visible;   }
#flop { visibility : hidden;    }
 
 
 
</style>
 
</head>
 
 
	<a href="#" onclick="flipflop();">afficher / masquer</a>
	<div id="flip">bla bla bla bla</div>
 
<hr />
 
	<a href="#"  onclick="aff1();">afficher / masquer</a>
	<div id="aff11">blooooooooooo</div>
 
 
</body>
</html>

Voilà mon superbe code, si vous avez quelques solutions, je prendrais volontiers !!

26/09/2013, 16h31
Bovino

Citation:

Je suis particulièrement nulle en Javascript

Bah... ça n'est pas spécifique à JavaScript ton erreur... je ne connais pas de langage dans lesquels une même variable (addr dans ton cas) peut correspondre à plusieurs valeurs ! :aie:

Très naze en effet =)

Bon j'ai trouvé une solution plus lisible mais ultime problème: tout s'affiche dès le chargement de la page alors que j'aimerais que ca soit invisible au début:

Code:

1
2
3
4
5
6
7
8
<a href="#" onclick="cache('perso')" > Cachette</a>
<div id="perso">perso<br /></div>    
 
<a href="#" onclick="cache('proexi')" > Cachette2</a>
<div id="proexi">pro exi<br /></div> 
 
<a href="#" onclick="cache('pronew')" > Cachette2</a>
<div id="pronew">pro new<br /></div>

Code:

1
2
3
4
5
6
7
8
9
10
var bool=false;
function cache(id){
	if(bool==true){
		document.getElementById(id).style.display='none';
		bool=false;
	}else{
		document.getElementById(id).style.display='block';
		bool=true;
	}
}

26/09/2013, 19h01
NoSmoking

Bonjour,
pourquoi ne pas les mettre simplement en display:none ?

PS : je ne parle pas de ta fonction, une petite recherche t'aurais permis de trouver bien plus mieux !
27/09/2013, 18h51
lmplmp

J'y ai pensé, mais je ne vois pas comment activer le display au clic sans recharger la page. Comment ferais tu ?
27/09/2013, 18h59
NoSmoking

Il suffit de ne pas utiliser les balises de liens, il existe une balise qui remplie très bien cette fonction, la balise BUTTON, et avec un peu de CSS...

Lorsque tu as exécuté la fonction sur le onclick le comportement par défaut se réalise, bilan...tu connais.
Il te faut donc inhiber le comportement pas défaut en faisant par exemple

Code:

<a href="#" onclick="cache('proexi'); return false" > Cachette2</a>

Ma première proposition reste valable néanmoins.

Dernier point le nom de la fonction est quand même pas terriblement choisie.