Eddy Eddy - 1 year ago 91
CSS Question

Collapse div horizontally to given width

I would like to collapse a div (container) horizontally to a width I can set, and so hiding its content. Collapsing should go to the left.

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


Answer Source

See this fiddle: http://jsfiddle.net/100pvu95/19/

The sidebar has position: relative (with default 0/0). When toggle is clicked, leftis animated to -55%, which keeps part of the sidebar still visible. When it's clicked again (being at left: -55%) it animates back to the initial state (if/else conditions + two animations):


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


    $(document).ready(function () {
    $("#toggle").on('click', function () {
        var x = $("#sidebar").css("left");
    if(x == '0px') {
            left: '-55%'
        } else {
            left: '0'
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download