JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<script src="https://terre-noire.fr/TN2/static/img/info1.png"></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:185px;
}

.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

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