Bonjour,

J'ai fait une page html avec des articles présentés en accordéon, ça fonctionne, pas de souci.

Là où ça coince, c'est que j'ai envisagé d'utiliser une base de données Mysql pour alimenter la page, afin qu'il soit plus facile d'ajouter des articles.
J'ai donc modifié mon code (uniquement dans le body) et fait une page en php:

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
<!DOCTYPE html>
<html class="">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<script src="js/jquery-1.js"></script>
		<script src="js/jquery.js"></script>
		<script src="js/navigation.js"></script>
		<script src="js/html5shiv.js"></script>
		<script src="js/jquery-ui.js"></script>
		<script>
		  $(function() {
			$("#accordion").accordion<br>      ({
			  collapsible: true,
			  active: false,
			  autoHeight: false,
			  navigation: true,
			  heightStyle: "content"
			  });
					 });
		$(function() {
		   $(".accordion").accordion<br>      ({
			  collapsible: true,
			  active: false,
			  autoHeight: false,
			  navigation: true,
			  heightStyle: "content"
			  });
					});
		</script>
		<script>
		$('.disable').addClass("ui-state-disabled");
			var accordion = $( "#accordion" ).data("accordion");
			 if(accordion){
			  accordion._std_clickHandler = accordion._clickHandler;
			  accordion._clickHandler = function( event, target ) {
			var clicked = $( event.currentTarget || target );
			 if (! clicked.hasClass("ui-state-disabled"))
			  this._std_clickHandler(event, target);
			   };
			 }
		</script>
		<script>
		$(document).ready(function(){
		  $(window).bind('scroll', function() {
		var navHeight = 149;
			if ($(window).scrollTop() > navHeight) {
			  $('.navigation').addClass('is-fixed');
			  $('#slider-top').css('margin-top', '70px');
 
			   }
			   else {
			  $('.navigation').removeClass('is-fixed');
			   $('#slider-top').css('margin-top', '0');
			  }
			});
		});
		</script>
	</head>
	<body>
 
		<div role="tablist" class="ui-accordion ui-widget ui-helper-reset" id="accordion">
				<?php require_once("fonctions/connection.php");
                                   $retour = mysql_query("SELECT * FROM t_texte ORDER BY id_texte'");
                                   $nbre = mysql_num_rows($res);
                                   $i=0;
                                   while ($donnees = mysql_fetch_array($retour))
                                   { ?>
			<!-- titre -->
			 <h3 tabindex="0" aria-expanded="false" aria-selected="false" aria-controls="ui-accordion-accordion-panel-<?php echo $i; ?>" id="ui-accordion-accordion-header-<?php echo $i; ?>" role="tab" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons">
			   <!-- affichage de l icône pdf si dispo -->
					<?php if (!empty($donnees['pdf'])) { ?>
				 <a href="pdf/<?php stripslashes($donnees['pdf']);?>" title="télécharger au format pdf"><img src="pdf.gif" alt="pdf"></a><?php }
                                 else { ?>
				 <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><span class="accordion-title">Br&egrave;ve n°<?php echo stripslashes($donnees['id_texte']); ?> - <?php echo stripslashes($donnees['titre']); ?></span>
				 <span class="icon-small icon-more icon-accordion"></span><div class="clear"></div>
				 <p>
				   <?php echo stripslashes($donnees['resume']); ?>
				 </p>
			 </h3>
			<!-- Article -->
					<div aria-hidden="false" role="tabpanel" aria-labelledby="ui-accordion-accordion-header-<?php echo $i; ?>" id="ui-accordion-accordion-panel-<?php echo $i; ?>" style="display: block;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
						<!-- affichage, soit du texte brut si dispo, soit du texte scanné au format jpg -->
						<?php if (empty($donnees['texte'])) { ?>
						<img src="<?php echo stripslashes($donnees['img']); ?>" alt="<?php echo stripslashes($donnees['img']);?>" width="100%"/>
						<?php }
                                                else { 
                                                echo stripslashes($donnees['texte']); }}?>
						<?php $i++;} ?>
					</div>
<!---  FIN ACCORDEON -->
		</div>
	</body>
</html>
Seulement voilà, maintenant l'accordéon ne fonctionne plus bien: le premier article peut se déplier et se replier, mais pas les suivants: ils restent dépliés en permanence, et je ne vois pas ce qui cloche
Pourriez-vous m'aider ?