Jquery Accordian в 2 колонки

Question

Я использовал JQuery аккордеон в моем 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> 

И JS код

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

Он получает выход как этот

Я хочу, чтобы это выравнивать в двух столбцах. Это первые 4, которые должны быть выровнены в левой части, оставаясь в правой части.

(Компоненты и СКМ должны быть в одной строке)

Возможно ли это? Или мне нужно добавить два 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/