Animated expander using ng-show. #angularjs

Animated Expander.css

.expander {
  -webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s;
  -moz-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s;
  -o-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s;
  transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s;
  height: 100px;
}

.expander.ng-hide {
  height: 0px;
}

.expander.ng-hide-add,
.expander.ng-hide-remove {
  display: block !important;
}

Animated Expander.html

<button ng-click="toggleAdvanced()">Show Advanced</button>
<div class="expander" ng-show="showAdvanced">
    ADVANCHED SEARCH OPTIONS HERE...
</div>

Animated Expander.js

$scope.showAdvanced = false;
$scope.toggleAdvanced = function() {
    $scope.showAdvanced = !$scope.showAdvanced;
}