Transform to a accordion

[ThomasHg]

do you know how to transform this part to an accordion menu, so passed image 1 to image 2 ?

 

	<!-- OPTIONS PANEL -->
	{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 ui-accordion">
									<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>