Réduire ou développer tous les div collapse

fazpedro · 22/11/2011, 15h52

Bonjour,

Sur le Jquery mobile,
je souhaite réduire ou développer tous les DIV "collapsible" en cliquant sur un bouton.
Merci.

mon script dans <head></head> :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript"><!-- DEBUT script pour les listes cachées-->
$(document).ready(function() {
		//réduit TOUS les niveaux
		$(".reduit_tous_messages").click(function(){
		$("#accordeon h3").removeClass("expand").addClass("collapse");
		$("#accordeon h3 div").removeClass("expand").addClass("collapse");
		return false;	});
		//montre TOUS les niveaux
		$(".montre_tous_messages").click(function(){
		$("#accordeon h3").removeClass("expand").addClass("collapse");
		$("#accordeon h3 div").removeClass("expand").addClass("collapse");
		return false;		});
    });
</script><!-- FIN script pour les listes cachées-->

....
mon html ensuite :

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
<div data-role="collapsible-set" data-theme="c" data-content-theme="d"> <!-- DEBUT ACCORDDEON -->
 
<div data-role="collapsible" data-collapsed="true" data-theme="c" data-content-theme="c" id="accordeon"><!-- DEBUT DATE -->
<h3>Mardi 22 Novembre</h3>
 
<div data-role="collapsible" data-collapsed="true"  data-theme="e" data-content-theme="e" id="accordeon">>
<h3>Type 1</h3>
<div data-role="collapsible" data-collapsed="true" data-theme="c" data-content-theme="d" id="accordeon">>
<h4>Artiste 1</h4>
<p>Description du premier....</p>
</div>
</div>
 
<div data-role="collapsible" data-collapsed="true"  data-theme="e" data-content-theme="e" id="accordeon">>
<h3>Type 2</h3>
<div data-role="collapsible" data-collapsed="true" data-theme="c" data-content-theme="d" id="accordeon">>
<h4>Artiste 2</h4>
<p>Description du Deuxième....</p>
</div>
</div>
 
</div> <!-- FIN DATE -->
 
</div> <!-- FIN ACCORDDEON -->

fazpedro · 06/01/2012, 22h15

Bonjour et meilleurs voeux 2012 !

j'ai trouvé les lignes concernées dans le fichier jquery.mobile-1.0.js pour afficher ou masquer une ligne, maintenant, je ne vois pas quelles lignes il me faudrait indiquer pour afficher ou masquer tous les "collapse"... peut-être "collapsed: false" ?...
Merci !

les lignes concernées dans le fichier :

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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
* "collapsible" plugin
*/
 
(function( $, undefined ) {
 
$.widget( "mobile.collapsible", $.mobile.widget, {
	options: {
		expandCueText: " click to expand contents",
		collapseCueText: " click to collapse contents",
		collapsed: true,
		heading: "h1,h2,h3,h4,h5,h6,legend",
		theme: null,
		contentTheme: null,
		iconTheme: "d",
		initSelector: ":jqmData(role='collapsible')"
	},
	_create: function() {
 
		var $el = this.element,
			o = this.options,
			collapsible = $el.addClass( "ui-collapsible" ),
			collapsibleHeading = $el.children( o.heading ).first(),
			collapsibleContent = collapsible.wrapInner( "<div class='ui-collapsible-content'></div>" ).find( ".ui-collapsible-content" ),
			collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" ),
			collapsiblesInSet = collapsibleSet.children( ":jqmData(role='collapsible')" );
 
		// Replace collapsibleHeading if it's a legend
		if ( collapsibleHeading.is( "legend" ) ) {
			collapsibleHeading = $( "<div role='heading'>"+ collapsibleHeading.html() +"</div>" ).insertBefore( collapsibleHeading );
			collapsibleHeading.next().remove();
		}
 
		// If we are in a collapsible set
		if ( collapsibleSet.length ) {
			// Inherit the theme from collapsible-set
			if ( !o.theme ) {
				o.theme = collapsibleSet.jqmData( "theme" );
			}
			// Inherit the content-theme from collapsible-set
			if ( !o.contentTheme ) {
				o.contentTheme = collapsibleSet.jqmData( "content-theme" );
			}
		}
 
		collapsibleContent.addClass( ( o.contentTheme ) ? ( "ui-body-" + o.contentTheme ) : "");
 
		collapsibleHeading
			//drop heading in before content
			.insertBefore( collapsibleContent )
			//modify markup & attributes
			.addClass( "ui-collapsible-heading" )
			.append( "<span class='ui-collapsible-heading-status'></span>" )
			.wrapInner( "<a href='#' class='ui-collapsible-heading-toggle'></a>" )
			.find( "a" )
				.first()
				.buttonMarkup({
					shadow: false,
					corners: false,
					iconPos: "left",
					icon: "plus",
					theme: o.theme
				});
 
		if ( !collapsibleSet.length ) {
			collapsibleHeading
				.find( "a" ).first().add( collapsibleHeading.find( ".ui-btn-inner" ) )
					.addClass( "ui-corner-top ui-corner-bottom" );
		} else {
			// If we are in a collapsible set
 
			// Initialize the collapsible set if it's not already initialized
			if ( !collapsibleSet.jqmData( "collapsiblebound" ) ) {
 
				collapsibleSet
					.jqmData( "collapsiblebound", true )
					.bind( "expand", function( event ) {
 
						$( event.target )
							.closest( ".ui-collapsible" )
							.siblings( ".ui-collapsible" )
							.trigger( "collapse" );
 
					});
			}
 
			collapsiblesInSet.first()
				.find( "a" )
					.first()
					.addClass( "ui-corner-top" )
						.find( ".ui-btn-inner" )
							.addClass( "ui-corner-top" );
 
			collapsiblesInSet.last()
				.jqmData( "collapsible-last", true )
				.find( "a" )
					.first()
					.addClass( "ui-corner-bottom" )
						.find( ".ui-btn-inner" )
							.addClass( "ui-corner-bottom" );
 
 
			if ( collapsible.jqmData( "collapsible-last" ) ) {
				collapsibleHeading
					.find( "a" ).first().add ( collapsibleHeading.find( ".ui-btn-inner" ) )
						.addClass( "ui-corner-bottom" );
			}
		}
 
		//events
		collapsible
			.bind( "expand collapse", function( event ) {
				if ( !event.isDefaultPrevented() ) {
 
					event.preventDefault();
 
					var $this = $( this ),
						isCollapse = ( event.type === "collapse" ),
					    contentTheme = o.contentTheme;
 
					collapsibleHeading
						.toggleClass( "ui-collapsible-heading-collapsed", isCollapse)
						.find( ".ui-collapsible-heading-status" )
							.text( isCollapse ? o.expandCueText : o.collapseCueText )
						.end()
						.find( ".ui-icon" )
							.toggleClass( "ui-icon-minus", !isCollapse )
							.toggleClass( "ui-icon-plus", isCollapse );
 
					$this.toggleClass( "ui-collapsible-collapsed", isCollapse );
					collapsibleContent.toggleClass( "ui-collapsible-content-collapsed", isCollapse ).attr( "aria-hidden", isCollapse );
					if ( contentTheme && ( !collapsibleSet.length || collapsible.jqmData( "collapsible-last" ) ) ) {
						collapsibleHeading
							.find( "a" ).first().add( collapsibleHeading.find( ".ui-btn-inner" ) )
							.toggleClass( "ui-corner-bottom", isCollapse );
						collapsibleContent.toggleClass( "ui-corner-bottom", !isCollapse );
					}
					collapsibleContent.trigger( "updatelayout" );
				}
			})
			.trigger( o.collapsed ? "collapse" : "expand" );
		collapsibleHeading
			.bind( "click", function( event ) {
				var type = collapsibleHeading.is( ".ui-collapsible-heading-collapsed" ) ?
										"expand" : "collapse";
				collapsible.trigger( type );
				event.preventDefault();
			});
	}
});

fazpedro · 22/05/2012, 11h24

Bonjour,

j'ai mis le code suivant :

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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html> 
<html class="ui-mobile" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Essai Collapse</title>
<?php include('head.php'); ?><!-- insere les scripts .js et les feuilles de style .css -->
</head>
<body class="ui-mobile-viewport">
<div data-role="page" data-theme="a"><!-- DEBUT de page principale -->
<div data-role="content" data-theme="b"><!-- Contenu principal -->
<h2>Essai Collapse</h2>
<script type="text/javascript"><!-- DEBUT script pour les listes cachées-->
     $(document).ready(function(){
		//montre TOUS les niveaux
		$(".montre_tous_messages").click(function(){
		$("#collapse_tous div").fadeIn(600)
		$("#collapse_type div").fadeIn(600)
		$("#collapse_nom div ").fadeIn(600)		
		return false;		});
		//réduit TOUS les niveaux
		$(".reduit_tous_messages").click(function(){
		$("#collapse_type div").fadeOut(600)
		$("#collapse_nom div").fadeOut(600)				
		return false;	});
});
</script><!-- FIN script pour les listes cachées-->
 
<p><li class="premier_lien"><a href="#" class="montre_tous_messages">Afficher tous les &eacute;v&eacute;nements</a></li>
<li class="fermeture_lien"><a href="#" class="reduit_tous_messages">Masquer tous les &eacute;v&eacute;nements</a></li></p>
 
<div data-role="collapsible-set" data-collapsed="false" data-theme="c" data-content-theme="d"><!-- DEBUT ACCORDDEON -->
 
<div data-role="collapsible" data-collapsed="false" data-theme="c" data-content-theme="c" id="collapse_tous"><!-- DEBUT DATE -->
<h3>Jour 1 </h3>
 
<div data-role="collapsible" data-theme="e" data-content-theme="e" id="collapse_type"><!-- DEBUT TYPE -->
<h3>Type 1 du jour 1</h3>
<div data-role="collapsible" data-collapsed="false" data-theme="c" data-content-theme="d" id="collapse_nom"><!-- DEBUT NOM -->
<h4>Nom 1 du jour 1</h4>
<p>ici du texte cache....<br /></p>
</div><!-- FIN NOM -->
<div data-role="collapsible" data-collapsed="true" data-theme="c" data-content-theme="d" id="collapse_nom"><!-- DEBUT NOM -->
<h4>Nom 2 du jour 1</h4>
<p>ici du texte cache....<br /></p>
</div><!-- FIN NOM -->
</div><!-- FIN TYPE -->
 
<div data-role="collapsible" data-theme="e" data-content-theme="e" id="collapse_type"><!-- DEBUT TYPE -->
<h3>Type 2 du jour 1</h3>
<div data-role="collapsible" data-collapsed="false" data-theme="c" data-content-theme="d" id="collapse_nom"><!-- DEBUT NOM -->
<h4>Nom 3 du jour 1</h4>
<p>ici du texte cache....<br /></p>
</div><!-- FIN NOM -->
<div data-role="collapsible" data-collapsed="true" data-theme="c" data-content-theme="d" id="collapse_nom"><!-- DEBUT NOM -->
<h4>Nom 4 du jour 1</h4>
<p>ici du texte cache....<br /></p>
</div><!-- FIN NOM -->
</div><!-- FIN TYPE -->
 
</div><!-- FIN DATE -->
 
<div data-role="collapsible" data-collapsed="false" data-theme="c" data-content-theme="c" id="collapse_tous"><!-- DEBUT DATE -->
<h3>Jour 2 </h3>
 
<div data-role="collapsible" data-theme="e" data-content-theme="e" id="collapse_type"><!-- DEBUT TYPE -->
<h3>Type 1 du jour 2</h3>
<div data-role="collapsible" data-collapsed="false" data-theme="c" data-content-theme="d" id="collapse_nom"><!-- DEBUT NOM -->
<h4>Nom 1 du jour 2</h4>
<p>ici du texte cache....<br /></p>
</div><!-- FIN NOM -->
<div data-role="collapsible" data-collapsed="true" data-theme="c" data-content-theme="d" id="collapse_nom"><!-- DEBUT NOM -->
<h4>Nom 2 du jour 2</h4>
<p>ici du texte cache....<br /></p>
</div><!-- FIN NOM -->
</div><!-- FIN TYPE -->
 
<div data-role="collapsible" data-theme="e" data-content-theme="e" id="collapse_type"><!-- DEBUT TYPE -->
<h3>Type 2 du jour 2</h3>
<div data-role="collapsible" data-collapsed="false" data-theme="c" data-content-theme="d" id="collapse_nom"><!-- DEBUT NOM -->
<h4>Nom 3 du jour 2</h4>
<p>ici du texte cache....<br /></p>
</div><!-- FIN NOM -->
<div data-role="collapsible" data-collapsed="true" data-theme="c" data-content-theme="d" id="collapse_nom"><!-- DEBUT NOM -->
<h4>Nom 4 du jour 2</h4>
<p>ici du texte cache....<br /></p>
</div><!-- FIN NOM -->
</div><!-- FIN TYPE -->
 
</div><!-- FIN DATE -->
 
 
</div><!-- FIN ACCORDDEON -->
 
 
</div><!-- Fin de Contenu principal -->
</div><!-- FIN de page principale -->
</body>
</html>

résultat :
j'arrive bien à masquer ou réduire tous les collapse... MAIS
l'inconvénient est que les boutons "+" ou les "-" ne fonctionnent plus aprsè avoir cliqué sur "afficher" ou "masquer"...

=> j'ai essayé ceci mais cela ne fonctionne pas (pas d'action...)

Code :

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

$("#collapse_type div").addClass('data-collapsed="false"');

par le biais de Jquery , il faudrait que dans les "div" on puisse indiquer :

Code :

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

data-collapsed="false"

Merci !

SpaceFrog · 22/05/2012, 11h31

Code :

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

$("#collapse_type div").removeClass('data-collapsed');

ou encore toggleClass()

fazpedro · 22/05/2012, 13h45

Désolé SpaceFrog
mais le code

Code :

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

$("#collapse_type div").removeClass('data-collapsed');

ne créé aucun événement !

à tout hasard je remet le code issu du Jquery mobile
http://jquerymobile.com/
peut-être aurez-vous des idées ?

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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
* "collapsible" plugin
*/
 
(function( $, undefined ) {
 
$.widget( "mobile.collapsible", $.mobile.widget, {
	options: {
		expandCueText: " click to expand contents",
		collapseCueText: " click to collapse contents",
		collapsed: true,
		heading: "h1,h2,h3,h4,h5,h6,legend",
		theme: null,
		contentTheme: null,
		iconTheme: "d",
		initSelector: ":jqmData(role='collapsible')"
	},
	_create: function() {
 
		var $el = this.element,
			o = this.options,
			collapsible = $el.addClass( "ui-collapsible" ),
			collapsibleHeading = $el.children( o.heading ).first(),
			collapsibleContent = collapsible.wrapInner( "<div class='ui-collapsible-content'></div>" ).find( ".ui-collapsible-content" ),
			collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" ),
			collapsiblesInSet = collapsibleSet.children( ":jqmData(role='collapsible')" );
 
		// Replace collapsibleHeading if it's a legend
		if ( collapsibleHeading.is( "legend" ) ) {
			collapsibleHeading = $( "<div role='heading'>"+ collapsibleHeading.html() +"</div>" ).insertBefore( collapsibleHeading );
			collapsibleHeading.next().remove();
		}
 
		// If we are in a collapsible set
		if ( collapsibleSet.length ) {
			// Inherit the theme from collapsible-set
			if ( !o.theme ) {
				o.theme = collapsibleSet.jqmData( "theme" );
			}
			// Inherit the content-theme from collapsible-set
			if ( !o.contentTheme ) {
				o.contentTheme = collapsibleSet.jqmData( "content-theme" );
			}
		}
 
		collapsibleContent.addClass( ( o.contentTheme ) ? ( "ui-body-" + o.contentTheme ) : "");
 
		collapsibleHeading
			//drop heading in before content
			.insertBefore( collapsibleContent )
			//modify markup & attributes
			.addClass( "ui-collapsible-heading" )
			.append( "<span class='ui-collapsible-heading-status'></span>" )
			.wrapInner( "<a href='#' class='ui-collapsible-heading-toggle'></a>" )
			.find( "a" )
				.first()
				.buttonMarkup({
					shadow: false,
					corners: false,
					iconPos: "left",
					icon: "plus",
					theme: o.theme
				});
 
		if ( !collapsibleSet.length ) {
			collapsibleHeading
				.find( "a" ).first().add( collapsibleHeading.find( ".ui-btn-inner" ) )
					.addClass( "ui-corner-top ui-corner-bottom" );
		} else {
			// If we are in a collapsible set
 
			// Initialize the collapsible set if it's not already initialized
			if ( !collapsibleSet.jqmData( "collapsiblebound" ) ) {
 
				collapsibleSet
					.jqmData( "collapsiblebound", true )
					.bind( "expand", function( event ) {
 
						$( event.target )
							.closest( ".ui-collapsible" )
							.siblings( ".ui-collapsible" )
							.trigger( "collapse" );
 
					});
			}
 
			collapsiblesInSet.first()
				.find( "a" )
					.first()
					.addClass( "ui-corner-top" )
						.find( ".ui-btn-inner" )
							.addClass( "ui-corner-top" );
 
			collapsiblesInSet.last()
				.jqmData( "collapsible-last", true )
				.find( "a" )
					.first()
					.addClass( "ui-corner-bottom" )
						.find( ".ui-btn-inner" )
							.addClass( "ui-corner-bottom" );
 
 
			if ( collapsible.jqmData( "collapsible-last" ) ) {
				collapsibleHeading
					.find( "a" ).first().add ( collapsibleHeading.find( ".ui-btn-inner" ) )
						.addClass( "ui-corner-bottom" );
			}
		}
 
		//events
		collapsible
			.bind( "expand collapse", function( event ) {
				if ( !event.isDefaultPrevented() ) {
 
					event.preventDefault();
 
					var $this = $( this ),
						isCollapse = ( event.type === "collapse" ),
					    contentTheme = o.contentTheme;
 
					collapsibleHeading
						.toggleClass( "ui-collapsible-heading-collapsed", isCollapse)
						.find( ".ui-collapsible-heading-status" )
							.text( isCollapse ? o.expandCueText : o.collapseCueText )
						.end()
						.find( ".ui-icon" )
							.toggleClass( "ui-icon-minus", !isCollapse )
							.toggleClass( "ui-icon-plus", isCollapse );
 
					$this.toggleClass( "ui-collapsible-collapsed", isCollapse );
					collapsibleContent.toggleClass( "ui-collapsible-content-collapsed", isCollapse ).attr( "aria-hidden", isCollapse );
 
					if ( contentTheme && ( !collapsibleSet.length || collapsible.jqmData( "collapsible-last" ) ) ) {
						collapsibleHeading
							.find( "a" ).first().add( collapsibleHeading.find( ".ui-btn-inner" ) )
							.toggleClass( "ui-corner-bottom", isCollapse );
						collapsibleContent.toggleClass( "ui-corner-bottom", !isCollapse );
					}
					collapsibleContent.trigger( "updatelayout" );
				}
			})
			.trigger( o.collapsed ? "collapse" : "expand" );
 
		collapsibleHeading
			.bind( "click", function( event ) {
 
				var type = collapsibleHeading.is( ".ui-collapsible-heading-collapsed" ) ?
										"expand" : "collapse";
 
				collapsible.trigger( type );
 
				event.preventDefault();
			});
	}
});
 
//auto self-init widgets
$( document ).bind( "pagecreate create", function( e ){
	$( $.mobile.collapsible.prototype.options.initSelector, e.target ).collapsible();
});
 
})( jQuery );

22/05/2012, 11h31	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 071 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 071 Points : 45 202 Points : 45 202	Code : Sélectionner tout - Visualiser dans une fenêtre à part $("#collapse_type div").removeClass('data-collapsed'); ou encore toggleClass() __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email