Slide toggle from right-to-left and left-to-right.

This is the version #1 of the DEMO

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<aside class="col-md-4">
  <div id="popup-x">
    <div class="widget-toggle-btn find-out-more ">
      Click me to toggle him!
    </div>
    <div class="widget find-out-more  ">
      <form action="" name="learn-more" id="learn-more" method="POST">
        <h5 id="head-element" name="head-element">For Admissions, Enroll Now!</h5>
        <input type="email" name="emailId" id="emailId2" placeholder="Email address">
        <div id="emailError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
        <input type="text" id="name2" name="name" placeholder="Full Name" title="Full Name">
        <div id="nameError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
        <input type="tel" id="phoneNumber2" name="phoneNumber" placeholder="Phone Number" maxlength="13" onkeypress="return isNumberKey(event)">
        <div id="phoneError2" style="margin-top:-15px;font-size:12px;display:none"> </div>
        <div id="image-load"></div>
        <input id="courseSelection" name="courseSelection" title="Course" type="hidden" value="" />
        <input id='redirectionUrl' type='text' style='display:none;' name='redirectionUrl' value='/' />
        <input type='hidden' style='display:none;' name='leadGroup' value='pondi' />
        <input type="submit" class="button" onclick="return validatePhone()" value="SUBMIT" />
      </form>

      <p class="disclaimer-popup">*Please note that by filling the form, you are agreeing to our terms & conditions in the <a href="disclaimer" class="disclaimer-popup-link" target="_blank">disclaimer section</a>.</p>
    </div>
  </div>
 ...

CSS

.widget {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 0px 4px 4px 4px;
  padding: 1.0005rem;
  -moz-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
  float: right;
  width: 87%;
}

.home-body aside {
  padding: 1.3125rem 0;
  padding-left: 1.3125rem;
  padding-right: 1.3125rem;
  float: left;
}

.find-out-more {
  background: #16a085;
  color: #fff;
}

.widget-toggle-btn {
  width: 46px;
  height: 84px;
  float: left;
  border-radius: 4px 1px 1px 4px;
  padding-left: 4px;
  margin-left: 19px;
}

JavaScript

$(".widget-toggle-btn").click(function() {
  alert('ss');
  // Set the effect type
  var effect = 'slide';

  // Set the options for the effect type chosen
  //var options = { direction: $('.mySelect').val() };

  // Set the duration (default: 400 milliseconds)
  var duration = 500;
 /* $('.widget').animate({
    width: 'toggle'
  }, 400);*/
  $('.widget').toggle(effect,'left', duration);
});