jQuery toggle and animate not compatible with version 1.9.1 and up?

0 Views

I’m trying to copy the show/hide function on WordPress Dashboard where you can click the button and the additional div shows up. I’ve been struggling to do it in jQUery with the slide animation and I realized that the one that’s messing it up was the jquery version.

I am using the latest foundation 6 framework and it uses the latest jquery version which is v2.1.4.

Read More

Please see my jsfiddle and change the version of the jquery and the button to toggle the div will disappear. Putting a display: block !important didn’t do the trick and it will not toggle the div.

So my question is why it’s not working on higher version of jquery? And also, I’m not sure what’s the requirement of the new foundation framework if I can use the 1.7.1 version of jQuery. I don’t know if in the future, it will be fine to use a lower version. 

    $(function() {
      $("#screen-btn").toggle(function() {
        $('.screen-meta').animate({
          height: '150'
        });
      }, function() {
        $('.screen-meta').animate({
          height: '20'
        });

      });
    })
Post Views: 0

Related posts

2 comments

  2. toggle isn’t an event handler for toggling a link, but a function to toggle the visibility of an element.
    Toggle hides the link if it is shown. So, in your code you’re toggling the link from visible to hidden, which is why it disappears.

    If you mean to toggle the black area when you click the link, you should bind an event handler to the link using click(function) or on('click', function).

    In your fiddle, you provide two functions to toggle, while according to the API, the first argument should be the duration and the second a callback function. So the way you call it is not valid, and that might be why you get unpredictable behaviour that is different between versions.

Comments are closed.