How to toggle Maximize/Minimize using jquery & animate.css?

Question

I have two columns and a button centered between them, I tried to make the button toggle (maximize/Minimize) the two columns with jquery and animate.css.

It seems easy to make, but didn't work well, I can only make it minimized for once, all I want is to make like a toggle. here is an example:

HTML:

    <a class="btn btn-default"> Maximize/Minimize <i class="fa fa-chevron-up" aria-hidden="true"></i></a>
<div class="col-xs-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ducimus unde quasi dolorum necessitatibus voluptates perferendis consequuntur alias inventore quisquam distinctio sunt tempora quam doloremque, molestias praesentium voluptatem, sed optio.</div>
<div class="col-xs-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus necessitatibus excepturi ut dolorum placeat ducimus accusamus corrupti dicta mollitia enim dolore impedit pariatur, nobis dignissimos ad, magni distinctio voluptate assumenda.</div>

CSS:

    body{
  position: relative;
}
.btn{
  display:block;
}


  @keyframes slideOutDown {
  to {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 200px, 0);  // distance of the animation
  };
  
    @keyframes slideOutUp {
  to {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, -200px, 0);  // distance of the animation
  }

JS:

   $(".btn").click(function(){
  $(".col-xs-6 , .btn").addClass('animated slideOutDown');
  $(".btn i").removeClass('fa-chevron-up');
  $(".btn i").addClass('fa-chevron-down');
    });

---

Here is jsfiddle example

I want to be able to maximize again with slideOutUp animation, after I minimize it.

Your helps are greatly appreciated.

Answer 1

you can use toggleClass() here. currently, you are adding or removing some classes on a click, in the next click you will have to do reverse of that, you can define a if else condition to check which ones to do when, or you can simply just use toggleClass()

 $(".btn").click(function(){
      $(".col-xs-6 , .btn").toggleClass('animated slideOutDown');
      $(".btn i").toggleClass('fa-chevron-up');
      $(".btn i").toggleClass('fa-chevron-down');

  });

Answer 2

$(".btn").click(function() {

    $(".col-xs-6 , .btn").toggleClass("animated slideOutDown");

    $(".btn i").toggleClass("fa-chevron-up fa-chevron-down");

    $(".col-xs-6 , .btn").addClass("animated slideInUp");

});