jQuery toggleClass - easing isn't working

Question

I am having problems getting the easing property of the toggleClass 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.

Here is my code sample: DEMO

Here are (all) the scripts I'm loading in my project:

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

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.

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

Answer 1

In your demo code I changed:

.hideMe { display:none; }

to

.hideMe { opacity: 0; }

This works with the easing effect, but this creates a problem where the element is just taking up space. It's not super-elegant, but I've solved that problem for you here by using a second 'removeMe' class here:

https://jsfiddle.net/je7d9wgr/

Bonus:

Alternatively use slideToggle(), example here: https://jsfiddle.net/gL0vnhc2/

Bonus 2:

This code checks on the current state of the checkbox, and then conditionally animates based on the value:

https://jsfiddle.net/fuzduh5g/

Answer 2

This can also be done using css transitions, no need for jquery easing effects

Here is a simple demonstration.

CSS

.hideMe {
 height:0px !important;
 border:none !important;
 overflow:hidden;
}

 #create-login-group {
  -webkit-transition:all 0.4s ease;
  transition: all 0.4s ease;
  border: 2px solid #000;
  height: 100px;
  width: 150px;
}

JS

$( "#create-login-button" ).change(function() {
   $('#create-login-group').toggleClass("hideMe", 100);        
});

Working JS Fiddle

Working Snippet

$(function(){
$( "#create-login-button" ).change(function() {
	$('#create-login-group').toggleClass("hideMe", 100);        
	});
});

.hideMe {
  height:0px !important;
  border:none !important;
  overflow:hidden;
}

#create-login-group {
    -webkit-transition:all 0.4s ease;
  transition: all 0.4s ease;
  border: 2px solid #000;
  height: 100px;
  width: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="create-login-button" role="button">

<div id="create-login-group" class="hideMe">
  Some text is here
</div>
<div>
  more content
</div>

Answer 3

If you want to use the toggleClass option, this is a bit tricky but will work.

Adding another class that is in charge of the "display: none", and toggling it after or before the actual animated class.

var lGroupEle = $('#create-login-group');
$("#create-login-button").change(function() {
  if ($(lGroupEle).hasClass("hidden")) {
    $(lGroupEle).toggleClass("hidden");
    $(lGroupEle).toggleClass("hideMe", 1000, "easeInOutQuad");
  } else {
    $(lGroupEle).toggleClass("hideMe", 1000, "easeInOutQuad", function() {
      $(lGroupEle).toggleClass("hidden");
    });
  }
});

.hideMe {
  opacity: 0;
}
.hidden {
  display: none;
}
#create-login-group {
  border: 2px solid #000;
  height: 100px;
  width: 150px;
}

<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<input type="checkbox" id="create-login-button" role="button">

<div id="create-login-group" class="hidden hideMe">
  Some text is here
</div>
<div>
  more content
</div>

or fiddle if u prefer - https://jsfiddle.net/63o92nms/1/