{literal}
<link rel="stylesheet" href="{/literal}{$_module.wwwpath}{literal}css/jquery-ui.css" /> 
	<script>
	

		// run the currently selected effect
		function runEffect(effect) {
		
			//Effect: blind, bounce, clip, drop, explode, fold, highlight, puff, pulsate, scale, shake, size, slide
			var selectedEffect = '{/literal}{if $_config.acc_animation!=""}{$_config.acc_animation}{else}slide{/if}{literal}';
			// most effect types need no options passed by default
			var options = {};
			// some effects have required parameters
			if ( selectedEffect === "scale" ) {
				options = { percent: 0 };
			} else if ( selectedEffect === "size" ) {
				options = { to: { width: 200, height: 60 } };
			}

			// run the effect
			$jQuery( effect ).toggle( selectedEffect, options, 500 );
			
		};


	</script>

{/literal}


{foreach from=$_vars.items item=item}
<div class="toggler" >
  {if $item.image.image != ''}
    {assign var="image" value=$_module.ressources|cat:$item.image.image}
      <img onclick="runEffect(effect{$item.id}); return false;" class="ui-widget-header ui-corner-all StyleTitre" style="cursor:pointer" src="{$image}"/> 

 {else}
  <h3 class="ui-widget-header ui-corner-all StyleTitre" style="cursor:pointer" onclick="runEffect(effect{$item.id}); return false;" >{$item.titre}</h3>
  
  {/if}
	<div id="effect{$item.id}" class="ui-widget-content ui-corner-all StyleDescription" style="display:none">
		<p>
			{$item.desc}
		</p>
	</div>
</div>        
{/foreach}