Javascript 将div水平折叠到给定的宽度

我希望将div（容器）水平折叠到可以设置的宽度，从而隐藏其内容。塌陷应向左移动

    <div id="container">
    <button type="button" id="myButton">click here</button>
    <p id="myText">
my text here
    </p>
</div>

点击这里

我的文本在这里

---

我希望此URL将对您有所帮助。试试这个

看这把小提琴：

侧边栏有

位置：相对
（默认为0/0）。单击切换时，
left
将设置为-55%的动画，使侧边栏的一部分保持可见。再次单击时（位于
左侧：-55%
），它将动画恢复到初始状态（if/else条件+两个动画）：

HTML:

那么？？？你试过什么吗？我试着根据我的需要调整/简化它，但它只会变得一团糟：我现在有了它，但我不希望侧边栏完全消失。我如何设置一个值以使其保持在屏幕中的一部分？谢谢！！就这样！！非常感谢！不客气！仅供参考：我再次编辑了答案，以包含最终工作结果，并删除了我的评论。
<div id="sidebar">
  SIDEBAR
  <button id="toggle">Toggle</button>
</div>

    $(document).ready(function () {
    $("#toggle").on('click', function () {
        var x = $("#sidebar").css("left");
    if(x == '0px') {
        $("#sidebar").animate({
            left: '-55%'
        });
        } else {
        $("#sidebar").animate({
            left: '0'
        });
        }        
    });
});