Div visible / invisible

**lmplmp** · 26/09/2013, 16h25

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

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

**Bovino** · 26/09/2013, 16h31

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 !

**lmplmp** · 26/09/2013, 16h34

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

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

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 :

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

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

**NoSmoking** · 26/09/2013, 19h01

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 !

**lmplmp** · 27/09/2013, 18h51

J'y ai pensé, mais je ne vois pas comment activer le display au clic sans recharger la page. Comment ferais tu ?

**NoSmoking** · 27/09/2013, 18h59

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 :

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

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

Div visible / invisible

JavaScript

Discussions similaires

Partager

Partager