將div水平摺疊爲給定寬度

Question

我想將div（容器）水平摺疊爲我可以設置的寬度，並隱藏其內容。摺疊應該放在左邊。

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

JSFDDLE HERE

Answer 1

看到這個小提琴：http://jsfiddle.net/100pvu95/19/

側邊欄有position: relative（默認0/0）。當點擊切換時，left被動畫至-55％，這使部分側欄仍然可見。當它再次點擊（在left: -55%是）它以動畫方式返回初始狀態（的if/else條件+兩個動畫）：

HTML：

<div id="sidebar"> 
    SIDEBAR 
    <button id="toggle">Toggle</button> 
</div> 

CSS：

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

Answer 2

我希望這個網址可以幫助你。嘗試這個。 https://www.sanwebe.com/2011/11/horizontal-expand-collapse-using-jquery