jQuery reverse correctly an animation with animate()

Question

I try to reverse a simple animation in Jquery but it's seem to be a problem for me ! The first animation works.
When i click to reverse the animation it's works too.
But if i want to use the animation again it's impossible. The width stay at 0px.

<div class="logo">
    <a id="remote-content-menu">Show</a>
</div> 

<div class="panell">
    <a id="hide-content-menu">hide</a>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, iusto, earum blanditiis voluptatibus cupiditate laudantium accusamus commodi corrupti suscipit possimus minima adipisci autem dolorem quam aperiam hic nulla. Laudantium, suscipit.</p>
</div>


<script type="text/javascript">
    $( document ).ready(function() {

        $( "#remote-content-menu" ).click(function() {
          $(".panell").animate({width:'toggle'},200);

        });
        $( "#hide-content-menu" ).click(function() {
          $(".panell").animate({width: 0},200);

        });

    }); 
</script>

There is the jsfiddle : http://jsfiddle.net/Sbt75/270/

I think the width:0px is the problem, but i don't find another solution.

Answer 1

Why not do this purely in CSS?

Thereby keeping your separation of concerns between content (HTML), style (CSS) and functionality (JS)

HTML

<input type='checkbox' id='showHide' />
<label for='showHide' data-showLabel='Show' data-hideLabel='Hide'></label>
<div class="panell">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, iusto, earum blanditiis voluptatibus cupiditate laudantium accusamus commodi corrupti suscipit possimus minima adipisci autem dolorem quam aperiam hic nulla. Laudantium, suscipit.</p>
</div>

CSS

input[type=checkbox] {
    position:relative;
    z-index:1;
    left:-50px;
}
label {
    position:relative;
    z-index:1;
    left:-50px;
}
input[type=checkbox] + label:before {
    left:50px;
    content:attr(data-showLabel);
    position:absolute;
    color:lightblue;
    font-size:16px;
}
input[type=checkbox]:checked + label:before {
    content:attr(data-hideLabel);
}
input[type=checkbox]:checked ~ .panell {
    max-width:260px;
}
.panell {
    position: fixed;
    top:0;
    height:100%;
    z-index:0;
    padding-top:20px;
    max-width:0px;
    transition:max-width 100ms ease-in;
    overflow-x:none;
    overflow-y:auto;
    background:#333;
    color:#fff;
    -webkit-box-shadow:inset 0 0 5px 5px #222;
    -moz-box-shadow:inset 0 0 5px 5px #222;
    box-shadow:inset 0 0 5px 5px #222
}

Answer 2

If you're going to toggle the width, you have to do it for both clicks

$( document ).ready(function() {
    $( "#remote-content-menu, #hide-content-menu" ).click(function() {
          $(".panell").animate({width:'toggle'},200);
    });
}); 

FIDDLE

Answer 3

Hardcode your width in your jquery:

 $( "#remote-content-menu" ).click(function() {
     $(".panell").animate({width:260},200);
 });

and update your CSS to display: block; and width:0; if you want to start the panel hidden.