Aide modification positionnement

[ThomasHg]

Je souhaiterais changer la disposition de certains éléments afin de les avoir en accordéon cependant je ne vois pas comment les changer. possible d'avoir un peu d'aide ? j'ai mis en pièce jointe ce que j'ai actuellement et ce que j'aimerais

{assign var=skipOptions value=false}
	{if $data.attributes.groups|@count == 1}
		{assign var=skipOptions value=true}
	{/if}
	{if $data.attributes.groups|@count > 1}
			{if $data.attributes.groups|@count == 2}
				{foreach from=$data.attributes.groups key=id_attribute_group item=group}
					{if $group.group_type == 'color' || $id_attribute_group == $ftl_idattrgroup}
						{assign var=skipOptions value=true}
					{/if}
				{/foreach}
			{/if}
		{if !$skipOptions}
			<div id="cv-optionsPanel" {if isset($featuresAr.toolsDisplay) && $featuresAr.toolsDisplay == 'tabs'}class="cv-hidden-off"{/if}>
				<ul {if isset($featuresAr.toolsDisplay) && $featuresAr.toolsDisplay == 'tabs'}class="cv-hidden"{/if}>
					<li><a href="#cv-options">{l s='Options' mod='cvjqueryext'}</a></li>
				</ul>

				<div id="cv-options">
					<fieldset class="attribute_fieldset">

						<div class="option-content">
							<label class="cv-quantitySelector attribute_label" for="cv-quantityContainer">{l s='Quantity: ' mod='cvjqueryext'}</label>
							<div id="cv-quantityContainer">
								<input id="cv-quantitySelector" value="1">
							</div>
						</div>

						{foreach from=$data.attributes.groups key=id_attribute_group item=group}
							{if $group.attributes|@count AND $id_attribute_group != $data.conf.dynValues.surface_group.id AND $group.group_type == 'select' AND $id_attribute_group != $ftl_idattrgroup}

								<div class="option-content">
									<label class="attribute_label" for="group_{$id_attribute_group|intval}">{$group.name|escape:'htmlall':'UTF-8'} </label>
									{assign var='groupName' value='group_'|cat:$id_attribute_group}

									<select
										name="{$groupName}"
										id="group_{$id_attribute_group|intval}"
										class="optionSelector"
									>
										{foreach from=$group.attributes key=id_attribute item=group_attribute}
											<option
												value="{$id_attribute|intval}" {if $group.default == $id_attribute} SELECTED="selected"{/if}
											>
												{$group_attribute|escape:'htmlall':'UTF-8'}
											</option>
										{/foreach}
									</select>
								</div>

							{elseif $group.attributes|@count AND $id_attribute_group != $data.conf.dynValues.surface_group.id AND $group.group_type == 'radio' AND $id_attribute_group != $ftl_idattrgroup}

								

								<div class="option-content">
									<label class="attribute_label" for="group_{$id_attribute_group|intval}">{$group.name|escape:'htmlall':'UTF-8'} :</label>
									{assign var='groupName' value='group_'|cat:$id_attribute_group}
									<ul>
										{foreach from=$group.attributes key=id_attribute item=group_attribute}
											<li>

												<label for="cv_radio_{$id_attribute}">
													{assign var=customImage value="`$_PS_ROOT_DIR_`\modules\cvjqueryext\lib\jquery-configurateurvisuel\css\img\custom\\`$id_attribute`.png"}
													{if file_exists($customImage)}
														<img src="{$_PS_BASE_URL_}{$__PS_BASE_URI__}modules/cvjqueryext/lib/jquery-configurateurvisuel/css/img/custom/{$id_attribute}.png" class="attribute_image" />
													{/if}

													<div>
														<input type="radio" id="cv_radio_{$id_attribute}" class="cv_attribute_radio optionSelectorRadio" name="cv_{$groupName|escape:'html':'UTF-8'}" value="{$id_attribute}" {if ($group.default == $id_attribute)} checked="checked"{/if} />

														<span>{$group_attribute|escape:'html':'UTF-8'}</span>
													</div>
												</label>
											</li>
										{/foreach}
									</ul>
								</div>
							

							{elseif $group.group_type == 'color'}
								<label id="cv-colorSelectLabel" for="group_{$id_attribute_group|intval}">{$group.name|escape:'htmlall':'UTF-8'} :</label>
								{assign var='groupName' value='group_'|cat:$id_attribute_group}

								<select
									name="{$groupName}"
									id="group_{$id_attribute_group|intval}"
									class="optionSelector colorOptionSelector"
								>
									{foreach from=$group.attributes key=id_attribute item=group_attribute}
										<option value="{$id_attribute|intval}" hex="{$data.attributes.colors.$id_attribute.value}" {if $group.default == $id_attribute} SELECTED="selected"{/if}>{$group_attribute|escape:'htmlall':'UTF-8'}</option>
								{/foreach}
								</select>
							  </p>
							{/if}
						{/foreach}
					</fieldset>
				</div>
			</div>
		{/if}
	{/if}

 

[Rajameltine]

Bonjour,

prestashop utilise bootstrap donc tu peux mettre un code bootstrap accordéon. Sinon il faudra passer par du JS mais c'est un peu compliqué.