JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<script src="https://terre-noire.fr/TN2/static/img/info1.png"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script href="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="cadre_infos">
  <div class="BRight">
  </div>
  <div class="inner_info">

  </div>
  <div class="BLeft">
    <div class="bt_info"></div>
  </div>
</div>

CSS

.cadre_infos {
  position: fixed;
  top: 50px;
  right: 50px;
  height: 148px;
  display: flex;
}

.BRight,
.BLeft,
.inner_info {
  background: url(https://terre-noire.fr/TN2/static/img/info1.png) no-repeat;
  height: 148px;
}

.BRight {
  background-position: -2px -17px;
  width: 63px;
}

.BLeft {
  background-position: -879px -17px;
  width: 40px;
}

.inner_info {
  background-position: -67px -17px;
  min-width: 0px;
  max-width: 500px;
}

.bt_info {
  background: url(https://terre-noire.fr/TN2/static/img/info1.png) no-repeat;
  background-position: 0 0;
  width: 10px;
  height: 15px;
  position: absolute;
  top: 65px;
  left: 22px;
  cursor: pointer;
}

JavaScript

$(document).ready(function() {
  $('.bt_info').on('click', function() {
    if($('.inner_info').css('width') > '0px')
      $('.inner_info').animate({
        width: '0px'
      }, 400);
    else
      $('.inner_info').animate({
        width: '500px'
      }, 400);
  });
});