Masquer DIV onClick si déjà visible

**vbaguet** · 24/06/2013, 14h31

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

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

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 :

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

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

**Barsy** · 24/06/2013, 15h33

Le problème vient de

Code :

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

$('#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 :

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

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

**vbaguet** · 24/06/2013, 15h57

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

**danielhagnoul** · 25/06/2013, 00h36

Bonsoir

Exemple :

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

**vbaguet** · 25/06/2013, 09h47

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

Code :

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

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

**danielhagnoul** · 26/06/2013, 22h50

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.

Masquer DIV onClick si déjà visible

jQuery

Vue hybride

Discussions similaires

Partager

Partager