의 jQuery하기 Accordian는

Question

내 JSP

<div id="accordion" class="subForms"> 
    <h3><fmt:message key="dimApplicationForm.component"/></h3> 
     <div></div> 
     <h3><fmt:message key="dimApplicationForm.sharedComponents"/></h3> 
     <div></div> 
     <h3><fmt:message key="dimApplicationForm.testSystem"/></h3> 
     <div></div> 
     <h3><fmt:message key="dimApplicationForm.incidents"/></h3> 
     <div></div> 
     <h3><fmt:message key="dimApplicationForm.scm"/></h3> 
     <div></div> 
     <h3><fmt:message key="dimApplicationForm.people"/></h3> 
     <div></div> 
     <h3><fmt:message key="dimApplicationForm.skills"/></h3> 
     <div></div> 
</div> 

에 JQuery와 아코디언을 사용하고 그리고 JS 코드는

var icons = { 
        header: "ui-icon-circle-arrow-e", 
        activeHeader: "ui-icon-circle-arrow-s" 
       }; 
       $("#accordion").accordion({ 
        icons: icons 
       }); 

그것은 내가이 정렬 할이

같은 출력을 얻을 수있다 두 개의 기둥으로 그것은 처음에는 왼쪽에 4 개, 오른쪽에 남아 있습니다.

이 가능하며 (SCM 및 구성 요소는 동일한 행에 있어야)? 아니면 별도로 두 div를 추가하고 두 가지 모두에 아코디언을 설정해야합니까?

Answer 1

당신이 2 개 아코디언을 추가 해달라고

, 어쩌면이 시도 :

<div id="accordion" class="subForms"> 
    <div class="leftCol"> 
    <h3><fmt:message key="dimApplicationForm.component"/></h3> 
     <div></div> 
     <h3><fmt:message key="dimApplicationForm.sharedComponents"/></h3> 
     <div></div> 
     <h3><fmt:message key="dimApplicationForm.testSystem"/></h3> 
     <div></div> 
     <h3><fmt:message key="dimApplicationForm.incidents"/></h3> 
     <div></div> 
    </div> 
    <div class="rightCol"> 
     <h3><fmt:message key="dimApplicationForm.scm"/></h3> 
     <div></div> 
     <h3><fmt:message key="dimApplicationForm.people"/></h3> 
     <div></div> 
     <h3><fmt:message key="dimApplicationForm.skills"/></h3> 
     <div></div> 
    </div> 
</div> 

var icons = { 
        header: "ui-icon-circle-arrow-e", 
        activeHeader: "ui-icon-circle-arrow-s" 
       }; 
       $("#accordion").accordion({ 
        icons: icons, 
        header: "h3" 
       }); 

http://jsfiddle.net/4Lw34/3/