<div class="container bg-dark">
  <div class="row">
    <div class="col">
      <button class="btn btn-primary my-4" id="showIB">Показать панель</button>
    </div>
    <div class="col">
      <div class="card border-success mb-3 float-right" style="max-width: 18rem;" id="sampleCard">
        <div class="card-header bg-transparent border-success">Header</div>
        <div class="card-body text-success">
          <h5 class="card-title">Success card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
        <div class="card-footer bg-transparent border-success">Footer</div>
      </div>
    </div>
  </div>
  <p class="text-white">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio iste molestias culpa praesentium reiciendis autem inventore eum ex voluptatum? Voluptas, incidunt praesentium illo exercitationem aperiam laborum maiores accusamus nisi soluta mollitia necessitatibus saepe provident vero enim tempora consectetur, dolor inventore eos nihil nobis repellendus ab corporis recusandae voluptates? Alias architecto cumque voluptas eveniet esse aliquid, fuga similique eaque, deserunt numquam a reprehenderit et blanditiis! Laudantium consequatur maiores, dicta exercitationem eaque ex asperiores totam similique aliquid id qui dolores a, odit reprehenderit delectus aliquam in ea illo nemo autem voluptatem repellat accusamus. Ipsa dignissimos alias et incidunt est aperiam dicta placeat voluptates aspernatur veniam ad sint nostrum totam inventore laborum exercitationem possimus autem delectus iusto, consectetur nihil perspiciatis explicabo? Architecto autem velit fuga dolor, cupiditate dolorum. Odit temporibus blanditiis, consequuntur nesciunt sapiente, eos animi obcaecati doloremque alias expedita aliquam repellendus adipisci. Dicta beatae, minima alias, illo, ipsum dolore repellendus quam laboriosam esse quasi cum? Quis eius ratione deleniti repellat ad cupiditate, qui aperiam, vel excepturi molestias reiciendis dolorum vitae quaerat. Ducimus adipisci eos unde, eum perferendis hic nobis aperiam nam temporibus earum perspiciatis repudiandae reprehenderit natus dolore incidunt quidem harum repellat excepturi modi quae a. Aliquid illum totam enim dolorum? Praesentium, odit! Rem veritatis aut voluptatibus quo atque quasi quae error accusantium beatae enim ex, vitae dolores id vero ducimus nemo ullam provident minus tenetur eligendi. Ratione architecto facere magnam cum rem quas possimus quae non repellat. Accusantium, magnam ea iste dolor ipsum, ipsa deserunt placeat repellendus ad animi maxime earum consectetur vitae natus cupiditate ducimus suscipit ullam corporis distinctio facilis aspernatur voluptates voluptatibus. Odit quibusdam labore temporibus harum pariatur rerum deleniti unde, maiores non. Aliquam, eos. Quam, magni. Eligendi rem recusandae fuga autem accusantium molestiae, iste nesciunt, unde sapiente minima et. Iure laudantium quisquam aut, repellat omnis debitis dolorem rem molestiae sit architecto officia doloribus nemo, saepe est magni ullam aperiam eaque. Laborum illum ratione quibusdam esse amet modi nesciunt, laboriosam labore voluptas cum nisi! Voluptatibus illo rem laboriosam aspernatur sit saepe accusantium ducimus voluptatum sunt illum maiores est, reiciendis fuga fugit quas doloribus quibusdam eligendi dignissimos cumque quam. Dolores pariatur officiis quas, vero quae natus, sunt maxime dignissimos ad eos nihil fugiat itaque veritatis non eligendi reiciendis nisi consequuntur! Temporibus repudiandae quae, illum molestias consequuntur officia magnam doloribus aperiam veniam illo nostrum labore ut ipsum quam reprehenderit neque atque fuga debitis accusamus repellendus placeat. Ratione reprehenderit impedit praesentium tenetur quidem aliquam in adipisci, assumenda vero error, dolore veniam itaque ipsa, cum sint officia quae numquam eligendi eos illo alias sed delectus ipsum. Id, quaerat fuga in aperiam maiores unde, deleniti quisquam blanditiis quas illum accusamus perspiciatis aliquid enim odit sunt, amet aspernatur! Excepturi explicabo voluptas natus, magni illum dignissimos maiores labore fugit, similique dolor ipsam, id quis sunt culpa animi magnam laboriosam odit. Doloremque culpa dignissimos ea saepe dolores distinctio dolore magni aut atque tempora quaerat eveniet minus optio doloribus voluptatibus iure, velit nisi suscipit maiores ducimus consectetur, facilis exercitationem molestiae. Minima facilis incidunt soluta eaque recusandae quisquam dolorum sint quam voluptas laborum? Qui, ipsam error quibusdam voluptatem architecto harum fugiat itaque voluptas? Nobis corporis tenetur sed, porro pariatur hic non officia omnis. Porro ipsa corrupti laudantium quasi cumque soluta similique unde nobis architecto cupiditate explicabo non ipsum placeat, doloribus, enim quod laboriosam quae. Quibusdam nam eveniet distinctio ratione porro sapiente amet! Quidem possimus eveniet, sed consequatur neque labore? Maxime est suscipit fuga, temporibus aliquam iusto quod laboriosam dicta consectetur! Labore libero voluptate, ea suscipit ullam nisi deleniti est distinctio ipsum impedit quidem tempore nobis, commodi quam aliquam, corrupti porro qui explicabo consequatur et. Ex beatae aliquid aspernatur et aperiam laudantium officia nobis ratione quasi, excepturi impedit ad animi, fuga temporibus quia exercitationem tenetur, asperiores molestias obcaecati? Voluptate tenetur veniam molestiae iure fuga voluptates? Ipsam animi dolor quibusdam doloribus omnis quos aut voluptas qui, eaque delectus commodi officia quod asperiores. Labore vel nisi voluptatibus voluptatem obcaecati corrupti odio dolorum quibusdam dicta eos eligendi laudantium, error, sit id incidunt. Nesciunt voluptas atque recusandae aliquid aperiam illo itaque distinctio esse exercitationem tenetur quo excepturi reiciendis, natus eius minus pariatur eaque autem, doloremque est ad fugiat corrupti facilis iusto. Porro magni, blanditiis cumque ex sit maiores corporis neque eveniet consequatur a cum doloribus modi nulla dignissimos ratione, impedit perspiciatis non tempora perferendis soluta. Aspernatur iure asperiores aliquam vero error officiis deserunt odio tenetur ducimus cum in praesentium, voluptatum nam nostrum minus incidunt? Nulla explicabo voluptas iste officia! Provident impedit atque velit, dolor ratione unde. Quis autem sed excepturi, magni natus voluptate placeat dolores laborum consectetur, minus non voluptates saepe repellendus id quibusdam vitae! Qui, nihil quidem voluptate animi a placeat quibusdam excepturi, molestiae, debitis minima voluptatum enim ullam itaque repudiandae ipsa ab veniam dolore temporibus. Cupiditate eaque sit provident obcaecati consectetur, nobis tempora perferendis quibusdam possimus distinctio. Nobis magni voluptatum harum cum? Cumque, minima voluptate? Totam voluptates provident dolorem doloremque fugiat vitae tempora pariatur eaque minus dolorum repellat saepe nihil eligendi ipsam animi nulla optio atque, error odio praesentium dolore nobis? Voluptate nobis minus, rerum autem quo alias incidunt dolorum officia obcaecati. Natus accusamus saepe, dolores debitis et eos excepturi nostrum, rerum iusto id architecto, qui quam doloremque ipsam dolorum consequatur sint assumenda quibusdam! Vel dolorum, neque, iste minima velit vitae ut placeat maxime, vero tempore itaque quos nostrum. Ratione cumque architecto sed eveniet, voluptatum cupiditate corrupti saepe. Eos quisquam vero dicta. Recusandae molestiae minima laboriosam iusto quam minus repudiandae obcaecati sint ex officia. Veniam laborum culpa vero in perferendis quibusdam voluptates nam. Dolorum, maxime. Repellendus fugit voluptas praesentium excepturi sint incidunt molestiae nemo, iusto ad? Ipsa hic reprehenderit cumque aperiam repellat earum ratione alias delectus at voluptate magni, fugiat a voluptatum. Odio blanditiis debitis illum distinctio quae velit et ab maxime eveniet asperiores! A blanditiis eos sint adipisci ullam, ad laboriosam ex molestiae ipsam, distinctio rem pariatur, alias maiores esse molestias modi rerum iure excepturi necessitatibus aliquam quam optio porro cupiditate dolorem! Molestiae blanditiis aperiam enim dolor quaerat unde ipsum inventore autem veritatis voluptatibus, nobis odio reprehenderit iure, ipsam est! Eligendi, doloremque beatae inventore vitae quae neque fuga excepturi soluta possimus odit recusandae aliquam omnis pariatur hic culpa voluptas quo aperiam, dolorem eveniet, officia deserunt.
  </p>
</div>

body {
  background: #343a40;
  overflow-x: hidden;
}

#sampleCard {
  right: -130%;
  display: none;
  opacity: 0;
}

$(document).ready(function () {
  $("#showIB").on("click", function (event) {
    event.stopPropagation();
    $("#sampleCard")
      .animate({
        right: 0,
        opacity: 1
      })
      .css("display", "inline");
  });
  $("#sampleCard").on("click", function (event) {
    event.stopPropagation();
  });
});
$(document).on("click", function () {
  $("#sampleCard").animate(
    {
      right: "-130%",
      opacity: 0
    },
    {
      complete: function () {
        $(this).css("display", "none");
      }
    }
  );
});