user906357 user906357 - 6 months ago 7
jQuery Question

Can not get jQuery functions working

I am trying to make a div that moves in and out of the page, however I can not make the jQuery function work.

It works perfectly here:

http://jsfiddle.net/WMGXr/1/

$('#toggle').toggle(
function() {
$('#popout').animate({ left: 0 }, 'slow', function() {
$('#toggle').html('Close');
});
},
function() {
$('#popout').animate({ left: -40 }, 'slow', function() {
$('#toggle').html('Show');
});
}
);

<div id="popout">
<div id="toggle">Show</div>
<br style="clear: both" />
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</div>

#popout { position: fixed; height: 100px; width: 75px; border: 1px dotted gray; background: darkblue; color: white; top:50px; left: -40px; }
#toggle { float: right; }


Here is how I tried implementing the function:

<head>
<meta charset="UTF-8">
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('#toggle').toggle(
function() {
$('#popout').animate({ left: 0 }, 'slow', function() {
$('#toggle').html('Close');
});
},
function() {
$('#popout').animate({ left: -40 }, 'slow', function() {
$('#toggle').html('Show');
});
}
);

</script>
</head>


However on my page it does not work. Why is this?

Answer

The toggle event has been removed after jquery version 1.9.

You can use the click event like

var left = -40;
$('#toggle').click(function () {
    left = left == 0 ? -40 : 0;
    html = 'Show';
    if (left == 0) {
        html = 'Close';
    }
    $('#popout ').animate({
        left: left
    }, 'slow', function () {
        $('#toggle ').html(html);
    });
});

Demo

var left = -50;
$('#toggle').click(function () {
    left = left == 0 ? -50 : 0;
    html = 'Show';
    if (left == 0) {
        html = 'Close';
    }
    $('#popout ').animate({
        left: left
    }, 'slow', function () {
        $('#toggle ').html(html);
    });
});
#popout {
  position: fixed;
  height: 100px;
  width: 85px;
  border: 1px dotted gray;
  background: darkblue;
  color: white;
  top: 50px;
  left: -50px;
}
#toggle {
  float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="popout">
    <div id="toggle">Show</div>
    <br style="clear: both" />
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
    </ul>
</div>