手风琴不同宽度jquery

我想使用jquery在此设置中设置手风琴：

 |      Header 1      |
 |Header 2 | Header 3 |
 |      Header 4      |

每个都是手风琴项目。有可能吗？怎么可能？我还想知道头2是否打开以打开头3

---

TA使用这种格式：

|       Header 1       |
|   Header 2 Header 3  |
|       Header 4       |

---

其中头2头3部分只是一个头标记中的两位文本（或者你可以在头标记中使用表格），而手风琴该部分的div包含一个表格或css格式，以实现你描述的效果。。。如果您希望每个标题看起来都是独立的（圆角），请使用css3。

使用这种格式：

|       Header 1       |
|   Header 2 Header 3  |
|       Header 4       |

其中头2头3部分只是一个头标记中的两位文本（或者你可以在头标记中使用表格），而手风琴该部分的div包含一个表格或css格式，以实现你描述的效果。。。如果你想让每个人头看起来都是独立的（圆角），可以使用css3。

像这样吗

HTML:

JS:

像这样

HTML:

JS:

---

如果单击标题3会怎么样。。。是否要打开标题2？如果单击标题3会怎么样。。。是否要打开标题2？

 #wrapper {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    }

.accordionButton {    
    width: 100%;
    float: left;
    background: #003366;
    border-bottom: 1px solid #FFFFFF;
    cursor: pointer;
    text-align: center;
    }

.accordionContent {    
    width: 100%;
    float: left;
    background: #95B1CE;
    display: none;
}

.buttonHalf {
    width: 49%;
    float: left;
}

#borderRight {
    border-right: 1px solid black;
}

$(document).ready(function() {

    //ACCORDION BUTTON ACTION    
    $('div.accordionButton').click(function() {
        $('div.accordionContent').slideUp('normal');    
        $(this).next().slideDown('normal');
    });

    //HIDE THE DIVS ON PAGE LOAD    
    $("div.accordionContent").hide();

});