jquery toggle behaving like hide rather than animate

The following script is supposed to make a div slide to the absolute position of 'left 300px.' Currently the script behaves like the show/hide toggle. The div just reduces in size both horizontally and vertically until it disappears and the opposite upon the second click. It does not smoothly slide off the screen.

Any clues? I've gotten most of this code from reading similar examples on here. I'm fairly certain it's verbatim.

<script>
$(document).ready(function(){
    $(".clickertest").click(function(){
        var panel = $('#sidebar');
        var originalPos = panel.css("left");
        panel.toggle(function() {
            $('#sidebar').stop().animate({left:"-300px"},400);
          },
          function() {
            $('#sidebar').stop().animate({left:originalPos},400);
          });
     });
});
</script>

This is the current CSS for the div. Note: I am using @media queries, but currently they are all the same for this particular div. Could this be stuffing it up?

#sidebar {
    background-color: #3A3A3A;
     left:0px; 
     top:105px; 
     width:300px; 
     bottom:0px; 
     position:absolute; 
     overflow:scroll; 
     z-index:1000;
}

Answers


Update: As mentioned below, the toggle function is no longer supported by jQuery.

Old (I'm still not sure why it wasn't working in the first place, so perhaps someone could give some advice on that, but this is a solution that works in its place.)

<script>
$(document).ready(function() {
    $(".clickertest").click( function(event){
        event.preventDefault();
        if ($(this).hasClass("isClicked") ) {
            $("#sidebar").animate({left:"0px"}, 400);          
            $(this).removeClass("isClicked");
        } else {
            $("#sidebar").animate({left:"-300px"}, 400);   
            $(this).addClass("isClicked");
        }
        return false;
    });
});
</script>

toggle() was deprecated since jQuery 1.8 link. What version of jQuery are you using?


Need Your Help

Using UIModalFormSheet presentation, but allowing view behind to intercept touches

ios presentmodalviewcontroller

I'm presenting a view controller for a color picker element modally, using a UIModalFormSheet style. On the iPad, the controller doesn't take up the whole screen, and views behind are dimmed and user

Call onclick method while parsing a web page

javascript python beautifulsoup urllib2

Disclaimer: This is my first attempt at web scraping. Do not mind if its a very simple question.