Masquer DIV onClick si déjà visible

Version imprimable

Bonjour à tous,

Alors voilàa le soucis, j'ai une serie de lien et une serie de div. Chaque lien possede comme attribut href l'id du div auquel il se rapporte, exemple :
Code:

1 2 <a href="#div1">Lien du div 1</a> <div id="div1">Content</div>
Je souhaite que lors du clique sur un lien, il affiche le contenu du div qui lui correspond. Mais si l'on click sur un lien alors que son div est deja visible, il devient invisible.

Voici mon code pour l'instant, il fonctionne correctement sauf que un div deja affiché ne se cache pas si l'on click sur le lien qui lui correspond...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 $('#map-europe li').click(function(){ var target = $("a",this).attr('href'); $('#addresses div').each(function(){ $(this).hide(); }); if($(target).is(":visible")) { $(target).hide(); } else { $(target).show(); } });
Voir en action

Merci beaucoup

Le problème vient de

Code:

$('#addresses div').each(function(){ $(this).hide(); });

Si tu masques tous les div avant de faire le test pour savoir si le div est visible ou non, tu obtiendra toujours "false" à la condition : $(target).is(":visible")

Essaie plutôt :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 $('#map-europe li').click(function(){ var target = $("a",this).attr('href'); if($(target).is(":visible")) { $('#addresses div').each(function(){ $(this).hide(); }); } else { $('#addresses div').each(function(){ $(this).hide(); }); $(target).show(); } });
ça devrait marcher

24/06/2013, 15h57
vbaguet

Merci, il y a deja un progrès, cependant, cela ne fonctionne pas encore, il faut cliquer deux fois pour que le div se cache :/

Bonsoir

Exemple :

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js", 
			//"http://code.jquery.com/jquery-1.10.1.min.js",
			"http://code.jquery.com/jquery-2.0.2.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js",
			"http://cdnjs.cloudflare.com/ajax/libs/jquery-url-parser/2.2.1/purl.min.js",
			function(){
 
				$( function(){
 
					$( "a[href^='#div']" ).on( "click", function(){
 
						var str = $( this ).attr( "href" );
 
						$( "div[id^='div']" ).not( str ).css( "display", "none" );
 
						if ( $( str ).is( ":hidden" ) ){
							$( str ).css( "display", "block" );
						}
 
						return false;
					})
 
 
				});
 
				$( window ).load( function(){
 
				});
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
		div[id^='div'] { display: none; margin: 1.2rem; padding: 0.6rem; width: 10rem; height: 10rem; border: 0.1rem solid red; }
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
 
		<a href="#div1">Lien du div 1</a>
		<a href="#div2">Lien du div 2</a>
		<a href="#div3">Lien du div 3</a>
 
		<div id="div1">Content div1</div>
		<div id="div2">Content div2</div>
		<div id="div3">Content div3</div>
 
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-06-25T00:16:46.240+02:00" pubdate>2013-06-25T00:16:46.240+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

J'ai modifié mon code comme ceci, mais cela ne fonctionne toujours pas...
Code:

1 2 3 4 5 6 7 8 $('#map-europe li').on('click', function() { var str = $("a",this).attr('href'); $('#addresses div').not(str).css('display', 'none'); if($(str).is(':hidden')) { $(str).css('display', 'block'); } return false; });
Si l'on clique sur le pays alors que le div est deja ouvert, il ne se ferme pas...

26/06/2013, 22h50
danielhagnoul

Bonsoir

Dans mon exemple toutes les divisions sont cachées au départ, si on clique sur le lien A correspondant à une division déjà visible il ne se passe rien, si on clique sur le lien B, la division A est cachée et la division B est montrée.

Il faut adapter le code de l'exemple à vos besoins.