Bootstrap Collapse & liste déroulante

Bonjour j'ai un soucis d'initialisation et j'ai du mal a m'en défaire

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
<div class="accordion" id="tarificationSwitch">
	<div class="accordion-group"> 
		<div class="accordion-heading">
			<a class="accordion-toggle" data-toggle="collapse" data-parent="#tarificationSwitch" href="#mod_de_loc_tar_j"> Modèle de tarif de location </a>
		</div>
		<div id="mod_de_loc_tar_j" class="accordion-body collapse">
			<div class="accordion-inner mod_de_loc_tar_j"> </div>
		</div>
	</div>
	<div class="accordion-group"> 
		<div class="accordion-heading">
			<a class="accordion-toggle" data-toggle="collapse" data-parent="#tarificationSwitch" href="#mod_de_sncf_tar_j"> Modèle de tarif de location ferroviaire </a>
		</div>
		<div id="mod_de_sncf_tar_j" class="accordion-body collapse">
			<div class="accordion-inner mod_de_sncf_tar_j"> </div>
		</div>
	</div>
	<div class="accordion-group"> 
		<div class="accordion-heading">
			<a class="accordion-toggle" data-toggle="collapse" data-parent="#tarificationSwitch" href="#mod_de_sncf_tar_c"> Modèle de tarif par couverture </a>
		</div>
		<div id="mod_de_sncf_tar_c" class="accordion-body collapse">
			<div class="accordion-inner mod_de_sncf_tar_c"> </div>
		</div>
	</div>
</div>

Je remplis chaque section avec des données récupérées via AJAX et j'ai aucun problème avec ça. Une fois récupéré je fait ça element_ges.modele.trigger( 'change' )
Qui renvois ici:

Code:

1
2
3
4
5
6
element_ges.modele.on( 'change', function ( ) { 
	var select = $( this ).val( )
	$( 'select[name="modele"] option' ).each( function ( ) { 
		$( this ).val( ) !== select ? $( '#' + $( this ).val( ) ).collapse( 'hide' ) : $( '#' + select ).collapse( 'show' )
	} )
} )

element_ges est un objet qui a pour clés l'ensemble des noms de mes input, select..., et pour valeur l'objet jQuery. Ici modele est un select:

Code:

1
2
3
4
5
<select name="modele" required>
	<option value="mod_de_loc_tar_j">Modèle de tarif de location </option>
	<option value="mod_de_sncf_tar_j">Modèle de tarif de location ferroviaire </option>
	<option value="mod_de_sncf_tar_c">Modèle de tarif par couverture </option>
</select>

Mon problème est que les sections sont toutes déroulées lors du premier appel a l'événement "change" du select. Par la suite le code a un comportement normale, c'est à dire qu'il déroule la section sélectionnée via le select.

J'ai d'abord pensé a initialiser le plugin Bootstrap Collapse que j'utilise avant le "trigger" mais ça ne change rien.

Des idées ?

D'avance merci !