Eddy Eddy - 2 months ago 13
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
</p>
</div>


JSFDDLE HERE

Answer

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):

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'
        });
        }        
    });
});
Comments