jquery et accordeon

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:

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:

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 ?

Citation:

Envoyé par zerros

Une idée ?

Oui. Pour les composants d'interface jQuery, il faut utiliser la doc jQueryUI
http://jqueryui.com/accordion/#no-auto-height

Yes merci. ça fonctionne avec les paramètres :)