N'afficher qu'un paragraphe à la fois

**hasunoseika** · 26/09/2012, 16h57

Salutations, j'ai un petit problème avec jquery dont je ne trouve pas de solution satisfaisante :'(
voici déjà le site ou j’héberge le test : http://japan-gumi.net/test69/

voici le code html très simple

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
<body>
    <div id="page">
    	<div id="center">
            <div id="header">
            </div><!--header -->
            <div id="access">
            </div><!--access -->
            <div id="corp">
				<div id="button"><span class="accessname">First</span></div>
                <div id="content">
                </div><!--content -->
				<div id="button2"><span class="accessname">second</span></div>
                <div id="content2">
                </div><!--content -->
			</div><!--corp -->
        </div><!--center -->
        <div id="footer">by christopher
        </div><!--footer -->
    </div><!--page -->
</body>

Et voici mon jquery

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
<script type="text/javascript">
$(document).ready(function(){
 
	$("#button").toggle(function(){
		$("#content").stop().animate({
			width: "975px",
			opacity: 0.9,
			minHeight:"500px",
			backgroundColor: "#000",
			left:0,top:30,
			}, 700);
		}, function() {
		$("#content").stop().animate({
			width: "100px",
			opacity: 0.3,
			minHeight:"20px",
			backgroundColor: "#000",
			left:0,top:0,
		 }, 400);
	});<!--toggle -->
 
	$("#button2").toggle(function(){
		$("#content2").stop().animate({
			width: "975px",
			opacity: 0.9,
			minHeight:"500px",
			left:0,top:30,
			}, 700);
		}, function() {
		$("#content2").stop().animate({
			width: "100px",
			opacity: 0.3,
			minHeight:"20px",
			backgroundColor: "#000",
			left:110,top:0,
		  }, 400);
	});<!--toggle -->
//----------------------------------------------------content^
});<!--docready -->
$("#content, #content2, #button, #button2").corner();
 
</script>

Je veux que quand je clique sur "first", "second" se cache sans que j'ai a ré-cliquer dessus et inversement

il y aura surement plus que 2 boutons donc essayez d'en tenir compte, le but c'est qu'a nouveau clique sur un des boutons, celui deja ouvert se referme

merci

**danielhagnoul** · 27/09/2012, 00h22

Bonsoir

Si vous traitez toutes les divisions ayant un ID "content" de la même manière, voici un exemple avec la méthode fadeTo(), le code est grandement simplifié.

Si chaque division ayant un ID "content" doit recevoir un traitement particulier (left et top), la solution simple m'échappe.

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
// init de la page
var jObjContent = $( "[id^='content']" );
 
jObjContent
	.not( ":first" )
	.fadeTo( 10, 0.3 );
	.end()
	.eq(0).fadeTo( 10, 0.9 );
 
// action sur l'événement click
$( "[id^='button']" ).on( "click", function(){
 
	// traite toutes les divisions content
	jObjContent.stop( true, true ).fadeTo( 400, 0.3 );
 
	// traite la division content qui suit l'élément en cours
	$( this ).next().stop( true, true ).fadeTo( 400, 0.9 );
 
	return false; // évite la propagation et l'action par défaut
});

N'afficher qu'un paragraphe à la fois

jQuery

Vue hybride

Discussions similaires

Partager

Partager