1

I would like to toggle a header div open and closed using jQuery's slideToggle() effect. I installed jquery-3.2.1.min.js and am using the following code:

$('.top-drawer').click(function() {
  $('.top-drawer .myblock .container').slideToggle();
  $('.top-drawer .closebutton').toggleClass('closed');
  $('.top-drawer .openbutton').toggleClass('closed');
});
.myblock .container {
  display: none;
  height: 20%;
  padding: 10pt 0;
  overflow: hidden;
}

.openbutton.closed,
.closebutton.closed {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="top-drawer">
  <div class="myblock">
    <div class="container">
      <div>
        <h2>Hello World!</h2>
        <p>
          Lots of words....
        </p>
      </div>
    </div>
  </div>
  <header class="closebutton closed">Close</header>
  <header class="openbutton ">Open</header>
</section>

The toggleClass() function works just fine and if I replace slideToggle with toggleClass I can get the div to appear and disappear. But I don't get the slide effect. The error message is:

Uncaught TypeError: $(...).slideToggle is not a function
at HTMLElement.<anonymous> (mycode.js:134)
at HTMLElement.dispatch (jquery-3.2.1.min.js:3)
at HTMLElement.q.handle (jquery-3.2.1.min.js:3)

I've looked through other postings but was unable to see the problem. Originally I was using an older version of jQuery and thought that might be it. I first downloaded the new slim version but then discovered it didn't include effects. I then downloaded the min version but I am still getting an error.

Any help would be appreciated.

praggmath
  • 11
  • 1
  • 4
  • what is the result of `console.log($.fn.jquery)` where slideToggle is called? – Kevin B Oct 20 '17 at 17:08
  • 3.2.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/parseXML,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-event/ajax,-effects,-effects/Tween,-effects/animatedSelector – praggmath Oct 20 '17 at 17:10
  • 1
    Don't use the slim version of jquery. – Kevin B Oct 20 '17 at 17:10
  • I am not using the slim version. I am using jQuery-3.2.1.min.js. I was using the slim version but read that post so I replaced it with the min version. – praggmath Oct 20 '17 at 17:13
  • the console.log result proves otherwise. caching? – Kevin B Oct 20 '17 at 17:16
  • I cleared the cache. The problem is occurring in browsers where I didn't use older versions of jQuery. I switched to the jQuery-3.2.1.js version and it still isn't working. – praggmath Oct 20 '17 at 17:41
  • Why is this class as a duplicate? the "duplicate" is nothing about this question. I would argue this should still be open – user2903379 May 11 '18 at 20:03

0 Answers0