水平手风琴文本也可以是水平文本，但需要垂直文本以及其中包含的内容

Question

我有一个水平对齐的手风琴。 请在下面找到我的代码

Detailed Code

有关水平CSS的一些代码

.panel-group {
    width:430px;
    z-index: 100;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(-100%) rotate(-90deg);
    -webkit-transform-origin: right top;
    -moz-transform: translateX(-100%) rotate(-90deg);
    -moz-transform-origin: right top;
    -o-transform: translateX(-100%) rotate(-90deg);
    -o-transform-origin: right top;
    transform: translateX(-100%) rotate(-90deg);
    transform-origin: right top;
}

但是里面的文本也是水平的。我需要文本为垂直，包括手风琴标题。

或请建议任何其他机制，该机制应将页面分为 4个部分，并具有合拢/展开部分，并且也应完全展开/折叠可能。