Accordéon avec bdd Mysql

**gadob** · 16/07/2015, 18h31

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 ?

**gadob** · 16/07/2015, 19h24

bon bé j'ai trouvé tout seul: une question de div pas fermés au bon endroit, tout simplement !
pour ceux que ça intéresse, voici le code, revu et corrigé et qui fonctionne:

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
<!DOCTYPE html>
<html class="">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<title>Titre</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<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({
					collapsible: true,
					active: false,
					autoHeight: false,
					navigation: true,
					heightStyle: "content"
				});
			});
			$(function() {
				$(".accordion").accordion({
					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 class="section"> <!--- voir layout.css ligne 9 pour la largeur max c'est dans ce div qu'on peut mettre un menu à droite (fixe de pref) -->
				<div style="float:right">
					<a href="http://monsite.fr"><span style="font-size:1.5em; font-weight: bold; text-decoration: underline">Accueil </span></a>
				</div>
				<div class="l-grid l-row-2">
 
					<div class="l-grid-65"> 
 
						<h1>Titre page</h1>
						<p class="introduction">sous titre</p>
						<p> (Cliquez sur les + pour dérouler les textes complets)</p>
 
	<!---  ACCORDEON -->
						<div role="tablist" class="ui-accordion ui-widget ui-helper-reset" id="accordion">
 
						<?php require_once("fonctions/connections.php"); 
                                                        $retour = mysql_query("SELECT * FROM t_textes ORDER BY id_texte");
                                                        $nbre = mysql_num_rows($retour);
                                                        $i=0;
 
                                                while ($donnees = mysql_fetch_array($retour)) 
                                                {  
                                        ?>
				  <!-- titre -->					
							<h3 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">
 
								<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>
					 <!-- résumé -->
								<p class="resume"> <?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'])) { ?>
							<p><img src="<?php echo stripslashes($donnees['img']); ?>" alt="<?php echo stripslashes($donnees['img']);?>" width="90%"/><br/> 
							 <?php  } else { echo $donnees['texte']; }?>
							<br/>
							<!-- affichage de  icône pdf si dispo -->
								<?php if (!empty($donnees['pdf'])) { ?>
									<a href="texte/pdf/<?php echo stripslashes($donnees['pdf']);?>" title="télécharger au format pdf"><img src="texte/pdf.gif" alt="pdf"></a> 
									<?php  }  else { }?>
							</p>
							</div>
 
						<?php $i++;} ?>
						</div>
					</div>
	<!---  FIN ACCORDEON -->
				</div>
			</div>
	</body>
</html>

Accordéon avec bdd Mysql

jQuery

Vue hybride

Discussions similaires

Partager

Partager