jquery et accordeon

**zerros** · 10/01/2013, 09h53

Bonjour,

j'ai mis en place un accordéon sur mon site en utilisant: http://docs.jquery.com/UI/API/1.8/Accordion

J'ai problème. Les accordéons sont créés dans une boucle for car le contenu est dynamique (récupéré d'un base mysql). Les accordéons sont bien créés, mais la hauteur des accordéons une fois ouverts est la hauteur de l'accordéon le plus grand. Du coup si j'ai beaucoup de texte dans un accordéon, et quasiment pas dans un autre, le second accordéon prend la hauteur du premier et donc fait une page énorme.

Le code est exactement celui du tutoriel, hormis mon foreach. dans le head:

Code :

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

1
2
3
4
5
6
7
8
9
10
link rel="stylesheet" type="text/css" href="templates/{$TPL}/css/global.css" />
		<link href="templates/{$TPL}/css/jquery-ui.css" rel="stylesheet" type="text/css"/>
		<script src="libs/jquery.min.js"></script>
		<script src="libs/jquery-ui.min.js"></script>
 
		<script>
			$(document).ready(function() {
				$("#accordion").accordion();
			});
		</script>

Dans le body:

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
<div id="accordion">
			{if $tasks !== "NOK"}
				{foreach from=$tasks item=x}
					<h3><a href="#">[{$x.idtask}] - [{$x.date}] - [{$x.name}] - {$x.action}</a></h3>
					<div>
						<div class="task">
							<fieldset>
								<legend>Informations</legend>
								<p><label>Date de création:</label> {$x.tstamp}</p>
								<p><label>Affecté à:</label> {$x.name}</p>
								<p><label>Date de réalisation:</label> {$x.date}</p>
								<p><label>Status Actuel:</label> {$x.status}</p>
							</fieldset>
						</div>
							{if $x.comments|is_array}
								{foreach from=$x.comments item=y}
									<div class="comments {$x.idtask}">
										<fieldset>
											<legend>[{$y.idcomment}] - [{$y.tstamp}] - {$y.name}</legend>
											{$y.comment}
										</fieldset>
									</div>
								{/foreach}
							{else}
								<div class="comments {$x.idtask}">
									<p>{$x.comments}</p>
								</div>
							{/if}
					</div>
				{/foreach}
			{/if}
		</div>

Une idée ?