Javascript 如何修改我的垂直可折叠内容面板？

原始版本的手风琴支持水平可折叠内容面板：

我为垂直可折叠的内容面板创建了一个JSFIDLE：

这就是我能做的

html，正文{
背景色：#e9eaed；
}
.内容{
宽度：960px；
高度：0px；
右边距：自动；
左边距：自动；
}
.小组{
宽度：430px；
z指数：100；
-webkit背面可见性：隐藏；
-webkit变换：translateX（-100%）旋转（-90度）；
-webkit变换原点：右上方；
-moz变换：translateX（-100%）旋转（-90度）；
-moz变换原点：右上；
-o变换：translateX（-100%）旋转（-90度）；
-o变换原点：右上角；
变换：translateX（-100%）旋转（-90度）；
变换原点：右上角；
}
.小组标题{
宽度：430px；
}
.小组标题{
高度：18px
}
.小组标题a{
浮动：对；
文字装饰：无；
填充：10px 430px；
利润率：-10px-430px；
}
.小组委员会{
高度：830px；
}
.img小组{
-webkit背面可见性：隐藏；
-webkit变换：translateX（0%）旋转（90度）；
-webkit变换原点：左上；
-moz变换：translateX（0%）旋转（90度）；
-moz变换原点：左上；
-o变换：translateX（0%）旋转（90度）；
-o变换原点：左上；
变换：translateX（0%）旋转（90度）；
变换原点：左上；
}
.小组p组{
-webkit背面可见性：隐藏；
-webkit变换：translateX（0%）旋转（90度）；
-webkit变换原点：左上；
-moz变换：translateX（0%）旋转（90度）；
-moz变换原点：左上；
-o变换：translateX（0%）旋转（90度）；
-o变换原点：左上；
变换：translateX（0%）旋转（90度）；
变换原点：左上；
}
.面板组.面板img{
左边距：400px；
位置：绝对位置；
}

标题1

11一段文字，内容与网站相关，如果读者觉得有必要阅读，可以阅读。他们也可以跳过它，但这样可以使初始视图的文本量大大减少，明白吗？

-某些来源


标题2


22一段文字，内容与网站相关，如果读者觉得有必要阅读，可以阅读。他们也可以跳过它，但这样可以使初始视图的文本量大大减少，明白吗？

-某些来源

尝试为手风琴添加一些脚本：

$(document).on('ready', function() {
    $('#collapseOne').collapse('toggle');
    $('#accordion .panel-heading').on('click', function(e) {
        $('body').addClass('accordion-clicked');
    });
});

比某些样式更能支持它：

#accordion .panel .panel-body {
    height: 40vw;
    width: 100vh;
}
#accordion .panel:nth-child(1) .panel-body {
    height: 80vw;
}
.accordion-clicked #accordion .panel:nth-child(1) .panel-body {
    height: 40vw;
}

---

您可以调整这些值。正在进行。

您已经尝试过做什么了？问题应该显示研究的证据和自己解决问题的尝试，你的特定编码相关问题的清晰轮廓，以及a中的任何相关代码，这样我们就有足够的信息来提供帮助。@FluffyKitten:正如你所知，原始手风琴允许水平内容面板。我把它们转换成垂直的。但是我不知道如何解决剩下的问题。那么这就不是该问的地方了。如果你不知道如何开始，那么要么做一些教程来学习，要么花钱请人帮你做。这不是编码服务。你需要做你的研究，并努力自己写。请参阅。此外，您应该在问题中直接包含代码-在堆栈溢出上实际上不允许外部链接，除非还附带此处的相关内容，因为可以删除或更改，从而使问题对未来用户无用。请看它看起来很漂亮。顺便问一下，是否可以在内容面板内旋转文本，使其水平？您不应该从一开始就这样做。转换后的元素会一直占据浏览器中的空间，您无法控制它。你必须用另一种方式创建一个水平的手风琴，试着在谷歌上搜索合适的jQuery插件（有很多）。不，我希望手风琴像现在一样垂直。只有文本内容应该是水平的。这是否意味着我不能用手风琴来实现这个目标？我理解你想要什么，但你做得不对。对图元应用变换不会更改其位置，只会在浏览器中显示。继续找另一个手风琴。也许你的意思是这样的？