Prestashop Jquery Accordion의 문제점

현재 카테고리가 accordion (제품 없음)으로 표시되어야하는 Prestashop 템플리트에서 작업 중이므로 smarty/php 코드에서 호출을 수동으로 추가하여 자동으로 모든 항목을 표시합니다. 생성 된 것들.Prestashop Jquery Accordion의 문제점

나는 JQuery와 아코디언을 사용하고 (http://jqueryui.com/accordion)

이 다음은 주요 문제 :

JS ADDED :

<script> 
$(function() { 
    $("#accordion") 
    .accordion({ 
     header: "> div > h3" 
     }) 
    .sortable({ 
     axis: "y", 
     handle: "h3", 
     stop: function(event, ui) { 
      // IE doesn't register the blur when sorting 
      // so trigger focusout handlers to remove .ui-state-focus 
      ui.item.children("h3").triggerHandler("focusout"); 
     } 
    }); 
}); 
</script>

와 모든이와 함께 작동 :

<div class="product_list_details"> 
    <div class="product_list_details_left"> 
     <div class="grid-container">     
     <ul id="product_list" class="grid"> 
      <div id="accordion"> 
      <div class="group"> 
       <h3>{if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</h3> 
       <p class="product_desc">{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}</p> 
       <h3>{if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</h3> 
       <p class="product_desc">{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}</p> 
       </div> 
      </div> 
     </ul> 
     </div> 
    </div> 
    </div>

하지만 알다시피 나는 그것을 만들기 위해 두 번 반복해야합니다. 내가하지 않으면 스크립트가 작동하지 않기 때문에 작동하지 않습니다. 내가 의미하는 것을 보여주는 화면을 추가 할 것입니다.

예 : SCREEN