The functionality of toggle()
that you are attempting to use has been deprecated and removed from the latest versions of jQuery. Instead, you can achieve a similar effect by using the click()
event combined with a simple ternary expression. You can try the following code:
$('button').click(function() {
var $el = $('#sidebarright');
$el.animate({
left: parseInt($el.css('left'), 0) == 0 ? 200 : 0
});
});
Additionally, please be aware that the page you have linked to on your website does not include a reference to jQuery. Here's how you can include it, along with a complete implementation of the code above:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function() {
$('button').toggle(function() {
var $el = $('#sidebarright');
$el.animate({
left: parseInt($el.css('left'), 0) == 0 ? 200 : 0
});
});
});
</script>
</head>
Furthermore, you can simplify this by utilizing CSS transitions and toggling a class:
#sidebarright {
/* UI styling rules here */
left: 0;
transition: left 0.5s
}
#sidebarright.open {
left: 200;
}
$('button').click(function() {
$('#sidebarright').toggleClass('open');
});