0

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?

marc_s
  • 675,133
  • 158
  • 1,253
  • 1,388
user906357
  • 3,873
  • 6
  • 23
  • 35
  • 1
    Read up on [jQuery document ready](https://learn.jquery.com/using-jquery-core/document-ready/). `$('#toggle')` is being processed before the element exists, thus nothing happens. – Alexander O'Mara Jan 02 '15 at 04:50
  • 1
    ^ that! Remember that jsFIDDLE adds a DOM ready handler automagically for you – adeneo Jan 02 '15 at 04:50
  • @adeneo Took the next words out of my mouth. jsfiddle technically does `onload` by default, but same idea. – Alexander O'Mara Jan 02 '15 at 04:51
  • More about "document ready" here, it makes the enclosed functions wait for page load to fire: http://learn.jquery.com/using-jquery-core/document-ready/ – Nathaniel Flick Jan 02 '15 at 04:52
  • according to [jquery docs](http://api.jquery.com/toggle-event/).`toggle` method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9 – Cerlin Jan 02 '15 at 05:01
  • And as noted below, there is no `toggle` method that does what you want in that version of jQuery, it's been removed. – adeneo Jan 02 '15 at 05:01
  • The issue is that you're trying to run your jQuery code BEFORE that element in the page has been loaded. You can either move the script tag AFTER the relevant DOM element or use `$(document).ready()` to wait for the DOM to load before running your code. This is a very common question here. – jfriend00 Jan 02 '15 at 05:13

3 Answers3

1

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>
Rohan Kumar
  • 38,998
  • 11
  • 69
  • 99
0

This should be in the document ready function as given under

$(document).ready(function(){

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

});
ahmad rabbani
  • 323
  • 1
  • 9
0
$(document).ready(function(){   
  //your toggle code here <br/>
});
Kampai
  • 21,517
  • 19
  • 87
  • 90
Prasanna
  • 1
  • 1
  • You ought to add a little explanation to your answer. "Try this" style answers are pretty unhelpful. – Gary Jan 02 '15 at 05:22