Javascript 折叠到侧面时仅显示标题的可折叠面板

我试图创建一个包含两个div（标题和内容）的div面板。 诸如此类：

<div class="left-panel">
    <div class="title">
        <span>title<span>
    </div>
    <div class="content">
        <span>some content</span>
    </div>    
</div>

标题
一些内容

我想在单击箭头后折叠此面板。在倒塌后，它应该只是左侧的一个窄条，因此它旁边的其他面板可以更宽。应该是这样的图像：

---

差不多吧。我有CSS的问题，应该写，使其工作。我该怎么做，让它看起来像那样？我的意思是，这里只会使内容部分消失，并以某种方式将整个面板和标题div旋转到左侧。

您可以使用此片段获得结果

参考：

函数openNav（）{ document.getElementById（“mySidenav”）.style.width=“250px”； } 函数closeNav（）{ document.getElementById（“mySidenav”）.style.width=“0”； }

正文{
字体系列：“Lato”，无衬线；
}
.侧导航{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.侧导航a:悬停{
颜色：#f1f1；
}
.sidenav.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav{填充顶部：15px；}
.sidenav a{字体大小：18px；}
}

动画侧导航示例
单击下面的元素打开侧面导航菜单

☰ 打开

使用javascript，您将在父元素（

左面板

）上切换类（“

折叠

”或类似的内容）。然后，您将有更多的css规则。

左面板。折叠的

，类似于：

.left-panel.collapsed > .content {
    display: none;
}

.left-panel.collapsed {
    transform: rotate(-90deg);
}

这用于基本旋转和隐藏内容。您可能需要一些额外的css用于动画、大小、位置等。

$（“#切换”）。单击（函数切换（）{
$（“#边栏”）.toggleClass（“折叠”）；
$（“#内容”）.toggleClass（“col-sm-12 col-sm-9”）；
});
。已折叠{
显示：无；
左边距：-25%；/*与侧边栏宽度相同*/
}
.btn{
显示：块！重要；
}

你的边栏内容
切换
您尝试过什么？发布你的CSS。我想这就是我想要的！：）我需要对它做更多的工作，因为我的自定义组件在完成后往往会定位有点奇怪，但是是的，它看起来不错。谢谢：）