jQuery toggleClass - easing isn't working
<p>I am having problems getting the easing property of the <code>toggleClass</code> to work. I have searched on this site and others, but still cannot get it to work as expected. The class is being toggled just fine, but it does not ease in or out smoothly.</p>

<p>Here is my code sample: <a href="https://jsfiddle.net/2cxdk12L/1/" rel="nofollow">DEMO</a></p>

<p>Here are (all) the scripts I'm loading in my project:</p>

<pre><code>&lt;!-- Scripts --&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"&gt;&lt;/script&gt;
&lt;script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"&gt;&lt;/script&gt;
</code></pre>

<p>I have a sneaky suspicion it has something to do with the scripts I'm loading (or maybe not loading?) because I've reviewed the code several times and compared it directly to the jQuery docs. I'm also very new to jQuery.</p>

<p>What I'm trying to accomplish is something similar to a clamshell effect. On page load the <code>&lt;div&gt;</code> is either being displayed or hidden depending on a value taken from the database and the checkbox is meant to toggle the <code>&lt;div&gt;</code> open or closed.</p>