jquery slideToggle not working when working with bootstrap v4

I am having trouble with jquery slideToogle. it works when I use the regular toggle (hide/show). Also there no problem when I use bootstrap's v4 'collapes'. But i wanted to have custom jquery instead to have more control like the speed of the slide.

Here is my codes below : Jquery:

<script> 
$(document).ready(function(){
    $("#reservas").click(function(){
        $("#reservas_form").slideToggle("slow");
    });
});
</script> 

2 answers

  • answered 2018-07-12 02:54 Steve Mulvihill

    The issue is that you are using the slim version of jQuery and it doesn't include .slideToggle(). Try including the regular version of jQuery to resolve your issue. I believe bootstrap uses the slim version by default.

  • answered 2018-07-12 04:16 Aravind S

    the slim version excludes the effects like the animation expected from slideToggle; so the function isn't defined.

    Slim build

    Sometimes you don’t need ajax, or you prefer to use one of the many standalone libraries that focus on ajax requests. And often it is simpler to use a combination of CSS and class manipulation for all your web animations. Along with the regular version of jQuery that includes the ajax and effects modules, we’ve released a “slim” version that excludes these modules.

    A working example with jquery

    $("#menu").click(function(){
            $("#content").slideToggle("slow");
     });
    #content{
      display:none;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="menu">Show Menu</div>
    <div id="content">Menu Contnet</div>