How to slide in from right with jQuery, with transitions?

I have a code that when you click on a button, a div appears. But the thing is, my div slides in from the top, and I want to have it when someone clicks on the button, it slides in from the right with transitions. But I don’t know how to change my current code to make that work. I know I can’t switch from display: none to visibility and opacity to add CSS animations, right? So what can I do to make this as smooth as possible? Can someone please take a look and help me out?

Here’s my code:

$(function() {
  $("a#toggle").click(function() {
    $("#slidein").slideToggle();
    return false;
  });
});
#slidein {
  display: none;
}

.card {
  background-color: #bdbdbd;
  text-transform: uppercase;
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
}

.close {
  position: absolute;
  right: 0;
  background: #fff;
  opacity: 1;
  color: #29292b;
  font-size: 10px;
  text-decoration-color: #757575;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" target="_blank" rel="nofollow" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div id="slidein">
  <div class="card rounded-0 border-0">
    <div class="card-header border-0 p-0">
      <button type="button" class="close p-2">
      <span aria-hidden="true">x close</span>
    </button>
      <img src="http://via.placeholder.com/350x200" class="card-img-top rounded-0" src="..." alt="Card image cap" height="200">
    </div>
    <!-- /.card-header -->

    <div class="card-block py-4 px-3">
      <h4 class="card-title mb-2">TEXT</h4>
      <p class="card-text">TEXT
        <span>TEXT</span>
        <span>TEXT</span>
      </p>

      <h4 class="card-title mb-2">TEXT</h4>
      <p class="card-text">TEXT</p>

      <h4 class="card-title mb-2">TEXT</h4>
      <p class="card-text">TEXT</p>

      <div class="form-group">
        <textarea class="form-control rounded-0 border-0 py-3" id="exampleTextarea" rows="6" placeholder="TEXT..."></textarea>
      </div>
    </div>
    <!-- /.card-block -->

  </div>
</div>
<a target="_blank" rel="nofollow" href="#" id="toggle">Contact</a>


You can use CSS transition to achieve your goal. Initially, the slide in panel #slidein will sit outside of the right edge of your screen. A CSS class in will be toggled when you click a#toggle. Clicking on button.close will remove the class in from #slidein that will slide the panel out.